css垂直對齊：中間，線條高度不同於高度

Question

`.history-bar{ 
padding-left:10px; 
margin-top:5px; 
margin-bottom:5px; 
height:35px; 
line-height:16px; 
width:472px; 
vertical-align:middle; 
color:black; 
}` 

我讀到line-height應該是一個div的高度，以vertical-align：middle; 這個div有35px的高度但是16px的行高。 有沒有辦法讓中間對齊這個div？

Answer 1

使用display: table-cell;與vertical-align: middle;垂直對齊文本。

.history-bar { 
    padding-left:10px; 
    margin-top:5px; 
    margin-bottom:5px; 
    height:35px; 
    line-height:16px; 
    width:472px; 
    color:black; 
    background: #eee; 
    display: table-cell; 
    vertical-align: middle; 
} 

JSFiddle demo

Answer 2

你可以從你的CSS刪除vertical-align財產，是的，你可以改變line-height是相同height，像這樣：

.history-bar { 
    padding-left:10px; 
    margin-top:5px; 
    margin-bottom:5px; 
    height:35px; 
    line-height:35px; 
    width:472px; 
    color:black; 
    border: 1px solid; /* added so you can see it's position */ 
} 

Here's a JSfiddle of the code above。

如果您沒有設置明確的height，那麼你可以通過padding管理文字的位置，在父容器，以及利潤率（比如說，如果你使用的是<p>已經申請margin-bottom）。