我的段落標簽中的文本沒有像應該的那樣垂直對齊

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/