Geek asks and answers

Center text vertically

How can I vertically center some plain text in plain text <div>? I have a markup:

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

It does not work in Firefox or Internet Explorer. Why not?

+5
source share
2 answers

This is not what it vertical-aligndoes. You probably want line-height:

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

Here is a demo.

+10
source

I found using the distance element for the most reliable method of centering any element that you know the height of (image, text). This will center the 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>
+1
source

More articles:


All Articles