行の高さが垂直中心ないインラインブロック

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>