行高不垂直中心內聯塊

Question

我試圖垂直居中直列塊這樣的：

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: red; 
 
    line-height: 50px; 
 
} 
 
span { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    background: white; 
 
}

<div> 
 
    <span></span> 
 
</div>

但跨度不垂直居中。爲什麼？

Answer 1

因爲line-height設置了文字的基線位置（span的底部）。由於您的跨度是20px很高，你必須添加的一半，爲line-height：

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: red; 
 
    line-height: 60px; 
 
} 
 
span { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    background: white; 
 
}

<div> 
 
    <span></span> 
 
</div>