1

さて、これはcssとhtmlの一部です：

CSS:

div {
    height:24px;
    line-height:24px;
}

html:

<div><img src="image.png"/>Text</div>

これで (私が思うに) 高さ 24 ピクセルの div が生成され、テキストは div 内の画像の後に垂直方向に中央揃えになるはずです。PS 画像は 24x24px です。ただし、行の高さが約 12px になりすぎます (行の高さを 12px に減らしても解決しません)。ただし、画像を 12x12px に変更すると機能し、テキストが正しい場所に配置されます。画像が完全に削除されている場合、テキストは適切な場所にあります。私の質問は、なぜそれが何であるか、そしてそれを修正できるかどうか、またはどのように修正できるかということだと思います。

ありがとう、シャーフ。

4

3 に答える 3

5

vertical-align:middleimgに渡す

div > img
{
    float:left;
    vertical-align:middle;
}

フィドル

于 2013-05-20T22:34:56.927 に答える
1

最も単純な (ただし、常に最適であるとは限りません) ソリューションは、次のとおりです。

img { vertical-align: bottom; }

画像の行の高さがずれることはありません。むしろ、ライン ボックスの高さが よりも大きくなりline-heightます。この理由は、デフォルトでは、画像は、画像の寸法で指定されたサイズの文字であるかのように扱われ、テキストのベースライン上にあるためです。したがって、画像には、画像自体の高さにテキストのベースラインとフォントの下部との間の距離を加えた高さが必要です。

CSS 用語で言えば、「テキストのベースラインに座っている」は、デフォルト設定の が原因ですvertical-align: baseline。これはさまざまな方法でオーバーライドでき、垂直方向の配置にさまざまな影響を与えますが、ブラウザーには の実装に多くのバグがvertical-alignあり、 の値bottomは非常に単純であるため、おそらく正しく動作することに注意してください。

于 2013-05-21T05:20:55.793 に答える
1

img に vertical-align を追加して試してみて、希望どおりになるようにしてください。

于 2013-05-20T22:34:54.337 に答える