私は、行の高さを持つdivの中に画像をセンタリングするとき、なぜ、3pxギャップが上部に表示されていますか？

StackOverflow https://stackoverflow.com/questions/1368253

質問

このページ noreferrer">

役に立ちましたか？

解決

NB：私はこの説明が正しいか完全にわからないんだけど、それは私には合理的なようです。の

。

まずは、スペックは先頭と半分をリードする上で言っているか見てみましょうのます：

  

「行の高さ」の値は、レンダリングされたグリフの上下の空間が存在してもよいコンテンツ領域の高さとは異なるかもしれないので。コンテンツの高さと「行の高さ」の使用値との差は、先頭と呼ばれます。ハーフ大手ハーフリードと呼ばれます。

     

ユーザーエージェントは、上下に半リーディングを追加、インラインボックス内に垂直にグリフの中心。テキストの一部が高い「12ピクセル」と「行の高さ」値が「14px」である場合、例えば、余分なスペースの2pxsが追加されなければならない：1ピクセルの上及び下の文字1ピクセル。 （これは空のボックスは、無限に狭い文字が含まれている場合のように、同様に空のボックスに適用される。）

これまでのところ、とても良いです。だから、div.smallのdiv.small未満の高さを持っているline-height内の任意の行ボックスを縦にdiv.smallでセンタリングされます。それでは、具体的vertical-align、middleプロパティのrel="noreferrer">

  

の親ボックスのベースラインと親の半分のx高さボックスの垂直方向の中間点の位置を合わせます。

これは必ずしも行ボックスの中心ではないことに注意してください！正確な位置は、フォントフェイスとサイズのお好みに応じて変化します。あなたが大きく、より小さなテキストズームでこれを確認することができます。ギャップの変化の大きさを

あなたが見つけたよう

、font-size: 0を設定すると、完全にギャップを削除します。フォントは、今は高さを持っていないので、ベースラインが上下中央に、行ボックスは、は50pxの大手とハーフリードを取得します。 vertical-align: middle画像をレンダリングするために、ブラウザは、そのベースライン時の中点、プラス今やゼロであるフォントのx高さを設定します。これは、垂直中心の画像を提供します。

他のヒント

は、divの修正問題にfont-size:0;を設定し、判明しました。しかし、それはまだギャップを説明していません。誰もがが原因か知っているのギャップ？

私は何が起こっているかを説明完全カントが、同じ問題に対処した後、私が、CSSでフォントプロパティを宣言された方法、例えばとは何かを持っていた表示されます。

フォント：11px / 1.35emのVerdana、MSゴシック、ヘルベチカ、サンセリフ;

=明らかテーブルに悪いです。 - 私はその宣言を削除し、代わりに、フォントサイズ使用：11px、行の高さ：PX、フォントファミリなど、それがギャップを固定

！
所属していません StackOverflow
scroll top