How do I center text vertically with CSS? [duplicate]

Answer 1

You can use line-height equal to that of its parent container.

For example,

<div style="height:32px;>
    <p style="line-height:32px;">Text</p>
</div>

You would want these in an external CSS sheet.

If I'm understanding your question correctly.

Answer 2

Well, there are several solutions.

The easiest is

#centerme
{
    // Will center the text vertically, but looks bad with multiliners
    line-height: 20em;
}

For multi-liners, you need to position a-box-in-a-box

#parentbox
{
    // We need the "parent" to have some kind of height
    height: 20em;

    // The most important... position children "relative" to the parent
    position:relative;
}

.childbox
{
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -5em; // This pulls the child back "up" to the vertical center
}

The problem here is that the "height" of your multi-liner must be known (or at least guessed), so it actually centers vertical.

What you need to know

There is no pure CSS way to know about the height of an element, which would then allow us to center it vertically in an "adaptive" way!

This means that when you change the text, you must change the CSS too to make sure it all still fits.

This can be annoying and that's where and why most people fall back on using JavaScript to work around this CSS annoyance of "a missing feature". In the end, JavaScript makes it easier on us all (at least in these kind of cases).

More

There's a lot of Q&A about this going on around the web and around this website. In case you missed them, here are some:

• How to center text vertically in HTML using CSS only
• CSS Vertically & Horizontally Center Div
• Center Text Vertically Within <DIV>
• How to vertically and horizontally center a P of text in the page

And there are many more; all providing individual solutions to individual cases. Those will help you get a bit more confident (as you initially stated you're new to this kind of CSS fiddling).

Answer 3

<div style="height:50px;line-height:50px;">
    Text
</div>

Answer 4

You could set your container to display:table-cell and add vertical-align:middle:

http://jsfiddle.net/ptriek/h5j7B/1

(But Internet Explorer 7 and below won't like this...)