2

line-height属性とtext-align属性の両方を使用してタグ内の画像を中央揃えおよび垂直方向に配置すると<div>、何らかの理由で画像が数ピクセル押し下げられることに気付きました。この変化は、画像の周囲に十分な余白がある場合はほとんど目立ちませんが、サイズ別のボックス内に150px画像がある場合、画像がわずかに押し出されていることがわかります。なぜこれがこれを行うのか誰にも分かりますか？150px150px150px

http://jsfiddle.net/rUs5E/

4

2 に答える 2

3

の定義vertical-align:middleは少し奇妙です。それは言う

ボックスの垂直方向の中点を、親ボックスのベースラインに親ボックスの X 高さの半分を加えた値に揃えます。

表示されているシフトは、「親の x 高さの半分」の組み合わせの効果です。どちらもフォントサイズに基づいたベースラインのシフト。したがって、( jsfiddle 内の.searchLogo) 親の font-size をゼロに設定することで、これを排除できます。これにより、x 高さ = 0 になり、ベースラインはボックスの中心線を通り、シフトはありません。

http://jsfiddle.net/rUs5E/1/を参照してください

于 2013-03-13T17:36:36.793 に答える
2

おそらく重複していますが：

を追加できますvertical-align: middle。これは、画像がキャラクターとして扱われていることに関係しています。vertical-align: baselineデフォルトは、3pxのようなものを下に追加するように見えると思います。

フィドル

于 2013-03-13T15:27:12.937 に答える