horizontal and vertical alignment css on item that changes size

Question

I have a piece of text that will be changing in length and width. I'd like a way through css if possible to center it horizontally and vertically no matter what the length of the text is.

It'll always be in the center.

I know how to center the text if it didn't always change through css. I can image a way through Javascript to do it, but if there is a way through css to do the trick, I'd like to know about it.

Here is my sample code:

Html

<h1 id="description">Play</h1>

CSS

description{
        height: 20px;
        width: 60px;
        text-align: center;
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        color: black;
}

My container is 100% height and width.

This CSS will obviously not work.

Fiddle: http://jsfiddle.net/ST59z/

Thank you, Liam

Do you want the `#description` element to be aligned in its container? — Hashem Qolami, Feb 22 '14 at 04:28
The accepted answer to the question I linked to specifically suggests aligning an element inside its container (span - or h1 in this case). It also offers many more possible solutions that the OP may consider instead. — Andrei Volgin, Feb 22 '14 at 05:09

V31 · Answer 1 · 2014-02-22T04:27:48.483

1

Do you want something like this what is there in the fiddle: http://jsfiddle.net/ST59z/9/

Code:

#description{
    height: 20px;
    width: 60px;
    text-align: center;
    margin:auto;
    position: absolute;
    vertical-align:middle;
    top: 0; left: 0; bottom: 0; right: 0;
    color: black;
}

CHANGE:

margin:auto;
vertical-align:middle;

edited Feb 22 '14 at 04:27

answered Feb 22 '14 at 04:19

V31

7,480
3
24
43

The html needs to be aligned vertically as-well. – Liam Shalon Feb 22 '14 at 04:20
added vertical-align:middle now – V31 Feb 22 '14 at 04:23
I don't see a difference with this in the jsFiddle. – Liam Shalon Feb 22 '14 at 04:25
If you need it completely in the middle then remove the 0 from margin. Your margin will look like: margin:auto; updating the fiddle as well – V31 Feb 22 '14 at 04:27

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

In order to align an element vertically and horizontally in an unknown dimensions, you could follow this approach.

Here you go:

.container {
    background-color: gold;
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {      /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#description {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: bold 36px/1 Arial sans-serif; /* reset the font property */
}

WORKING DEMO

edited May 23 '17 at 11:57

Community

1
1

answered Feb 22 '14 at 04:36

Hashem Qolami

88,138
25
132
151

I could not get this to work with a percentage height. I'm using 100% width and height. – Liam Shalon Feb 22 '14 at 04:48
@LiamShalon Percentage height for which element? – Hashem Qolami Feb 22 '14 at 04:49
@LiamShalon Then you need to set an explicit `height` for `body` too. Here is the **[Updated Demo](http://jsfiddle.net/hashem/ST59z/11/)** – Hashem Qolami Feb 22 '14 at 04:51
I have another question for you... could this code somehow effect my layering? The text is now showing up under everything else, is there a reason why it could be happening now and not before? – Liam Shalon Feb 22 '14 at 05:32
Well, It would be better if you could create an online demo or update that fiddle to demonstrate the issue in action. – Hashem Qolami Feb 22 '14 at 05:34
http://jsfiddle.net/2ba7M/ – Liam Shalon Feb 22 '14 at 05:57
1

@LiamShalon Please note that [`z-index` property works only on *non-static* positioned elements](http://stackoverflow.com/questions/21937179/z-index-property-not-work/21937208#21937208). Hence, you need to set a proper position to the elements to get the `z-index` to work. here is the **[Updated Demo](http://jsfiddle.net/hashem/2ba7M/1/)**. – Hashem Qolami Feb 22 '14 at 06:02
worked perfectly, thanks! – Liam Shalon Feb 22 '14 at 06:17

score 0 · Answer 3 · edited Jul 19 '14 at 15:50

0

Here are some changes done:

#description {
    height: auto;
    width: auto;
    text-align: center;
    max-height:100%;
    max-width:80%;
}

edited Jul 19 '14 at 15:50

Jamal

747
7
22
31

answered Feb 22 '14 at 04:30

sandeep kumar

21
2

horizontal and vertical alignment css on item that changes size

3 Answers3