line-height：0ボタンの垂直中心に画像を置く

Question

imgをbuttonに垂直に配置しようとしたときに、このコードを他のサイトで見ました。

button { 
 
    line-height: 0; 
 
    height: 50px; 
 
} 
 
img { 
 
    height: 25px; 
 
}

<button> 
 
    <img 
 
     src="https://www.materialui.co/materialIcons/action/search_24px.svg" 
 
     alt="search" /> 
 
</button>

line-height: 0;画像なしverticalyボタンの中心exacltyありません。しかし、我々が置くときline-height: 0;それは完璧に行った。私はchrome 50でテストしました。なぜこれが起こっていますか？ 「通常」の値は、すべての要素に適用されるだけで、単一の具体的な値ではなく、フォントサイズに応じて、「合理的な」値を計算しているためline-height: normalが働いていなかったのはなぜ

http://codepen.io/asim-coder/pen/ezmYwm

Answer 1

要素にset（または継承）します。 Heightとline-heightは2つの異なるものです。だから、あなたは垂直になっていないのです。centered出力。

line-height: 0は、テキストの行の高さをnullに設定します。テキストのデフォルトline-heightをクリアします。

あなたがイメージ `表示設定されます場合は、垂直vertical-align: middleルール

button { 
 
    height: 50px; 
 
} 
 
img { 
 
    height: 25px; 
 
    vertical-align: middle; 
 
}

<button> 
 
    <img src="https://www.materialui.co/materialIcons/action/search_24px.svg" alt="search" /> 
 
</button>