The text in my paragraph tags isn't vertically aligned like it should be

Question

I used the line-height property so that the inner text of my div would be vertically aligned:

div.header
{
    background-color: #00325f;
    height: 50px;
    padding: 0px;
    min-width: 880px;
    line-height: 25px;
}

Hence, the 00011101010000110101010 from the following should be in the middle of the div in which it resides.

<div class="header">
     <p>00011101010000110101010</p>
</div> 

But when I preview my page, it's up at the top of the div like usual. Can someone help me resolve this issue and explain the HTML logic behind the issue?

Answer 1

Your line-height should be 50px not 25px to vertically center the text.

div.header
{
    background-color: #00325f;
    height: 50px;
    padding: 0px;
    min-width: 880px;
    line-height: 50px;
}

The line-height should be the same height as the container itself.

Here is a fiddle: http://jsfiddle.net/7eZGe/