3

このページをご覧ください。右側の画像は、div内の中央に配置する必要があります。しかし、よく見ると、上部に約3ピクセルの小さな境界線があります。そして、（firebugまたは同等のIE8を介して）無効にするとoverflow: hidden、下部が突き出ます。

HTMLは次のとおりです。

<div class="small">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
    <img src="/images/photos/View.jpg" alt="View" />
</div>

そしてCSS、これ：

div.small
{
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    overflow:hidden;
    margin:5px;
    background-color: #C0C0C0;
    float:left;
}
div.small img
{
    vertical-align: middle;
    max-width:100px;
    max-height:100px;
    display: inline;
}

この不思議なギャップの原因は何ですか？余白とパディングを確認しましたが、問題はないようです。

4

3 に答える 3

5

NB：この説明が正しいかどうかは完全にはわかりませんが、私には理にかなっているようです。

まず、リーディングとハーフリーディングについてスペックが何を言っているか見てみましょう：

'line-height'の値はコンテンツ領域の高さと異なる場合があるため、レンダリングされたグリフの上下にスペースが存在する場合があります。コンテンツの高さと「line-height」の使用値の差は、リーディングと呼ばれます。リーディングの半分はハーフリーディングと呼ばれます。

ユーザーエージェントは、グリフをインラインボックスの垂直方向に中央揃えにし、上下にハーフリーディングを追加します。たとえば、テキストの高さが「12px」で、「line-height」の値が「14px」の場合、文字の上に1px、下に1pxの2pxの余分なスペースを追加する必要があります。（これは、空のボックスに無限に狭い文字が含まれているかのように、空のボックスにも適用されます。）

ここまでは順調ですね。したがって、高さが'sdiv.small未満のa内のラインボックスは、垂直方向の中央に。が配置されます。次に、プロパティ、具体的には値を見てみましょう。div.smallline-heightdiv.smallvertical-alignmiddle

ボックスの垂直中点を、親ボックスのベースラインに親のx高さの半分を加えたものに合わせます。

これは必ずしもラインボックスの中心ではないことに注意してください。正確な位置は、フォントの面とサイズの選択によって変わります。これは、テキストを拡大および縮小することで確認できます。ギャップのサイズが変化します。

お気づきのように、設定font-size: 0するとギャップが完全になくなります。フォントに高さがないため、ラインボックスは、ベースラインが垂直方向の中央に配置された50pxの先頭と半分の先頭になります。画像をレンダリングするためvertical-align: middleに、ブラウザはそのベースラインに中点を設定し、さらにフォントのエックスハイトをゼロに設定します。これにより、垂直方向の中央に画像が表示されます。

于 2009-09-02T16:11:10.383 に答える
1

font-size:0;結局、divを設定すると問題が解決します。しかし、それでもギャップを説明することはできません。ギャップの原因を知っている人はいますか？

于 2009-09-02T15:03:34.107 に答える
0

何が起こっているのかを完全に説明することはできませんが、同じ問題に対処した後、cssでフォントプロパティを宣言した方法と関係があるようです。

font：11px / 1.35em Verdana、Arial、Helvetica、sans-serif;

=明らかにテーブルに悪い。--その宣言を削除し、代わりにfont-size：11px、line-height：px、font-familyなどを使用して、ギャップを修正しました。

于 2010-12-03T00:00:57.680 に答える