Center text vertically

Question

How can I vertically center some simple text in a normal <div>? I have markup like this:

<div style="height:200px;">
   <span style="display:inline; vertical-align:middle;">ABOUT</span>
<div>

It doesn't work under either Firefox or Internet Explorer. Why not?

Answer 1

That's not what vertical-align does. You probably want line-height:

<div>
    <span style="line-height: 200px;">ABOUT</span>
</div>

Here's a demo.

Answer 2

I have found using a spacing element to the most reliable method of centering any element you know the height of (image, text). This will center an element in a container of any height.

CSS:

#outer {
    background: grey;
    height: 200px; /* any height */
}

#outer > div {
    height: 50%;
    margin-bottom: -6px;
}

#outer span {
    font-size: 12px;
}

HTML:

<div id="outer">
    <div></div>
    <span>Example</span>
</div>