3
votes

I have something like this:

<p style="text-align:center;background-color:yellow;"><span style="vertical-align:middle;">My text goes here...</span></p>

Obviously, as you can see here, my intention is to center the span inside that paragraph (both horizontally and vertically). The text is centered horizontally just fine, but why isn't the vertical centering not working? What's wrong here?

Thank you

2

2 Answers

6
votes

http://jsfiddle.net/gxArp/

Using display:table; on p and display:table-cell; on span.

p{
    text-align:center;
    background-color:yellow;
    height:50px;
    width:100%;
    display:table;
}
span{
    display: table-cell;
    vertical-align: middle;
}
0
votes

Vertical-align aligns the content inline. It is not the CSS equivalent for the HTML attribute valign="middle".This means it is vertically aligned in comparison to the elements right before and after, and not in reference to parent/child. This means that this property can align text within a line or inside a td element. Please check this link http://phrogz.net/css/vertical-align/index.html on how to achieve vertical centering.

Hope this helps.