我的段落标签中的文本没有像应该的那样垂直对齐

Question

我使用line-height属性，以便div的内部文本垂直对齐：

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

因此，下面的00011101010000110101010应该位于它所在的div的中间。

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

但是，当我预览页面时，它像往常一样位于div的顶部。 有人可以帮助我解决此问题并解释问题背后的HTML逻辑吗？

Answer 1

您的line-height应为50px而不是25px以使文本垂直居中。

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

line-height应与容器本身的高度相同。

这是一个小提琴： http : //jsfiddle.net/7eZGe/