-1

高さ18pxの画像と横のテキストを中央揃えにしたいです。ここに私が使用するコードがあります:

<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle;">Some text here
</div>

このコードでは、div コンテナーは 18 ピクセルではなく 19 ピクセルの高さでレンダリングされ、テキストは画像の中央に配置されません。Safari 4 と Firefox 3.6 で試しました。その1ピクセルの理由は何ですか？

ありがとう

4

3 に答える 3

0
  1. スタイル（マージン/パディング）をリセットすることを忘れないでください：div、img、span {margin：0; パディング：0; border：0}
  2. 垂直整列が機能するためには、要素がインラインである必要があります。
  3. テキストを垂直方向に揃える一般的な選択は、行の高さをコンテナと同じにすることです。

例えば ​​：

<div><img src="somepic.jpg" style="height:18px; vertical-align:middle;"><span style="line-height:18px;">Some text here</span></div>
于 2010-02-09T16:24:53.007 に答える
0

どこかに境界線があり、それを取り除くか、幅を 0 に設定する必要がありますか?

于 2010-02-08T21:36:47.787 に答える
0

ここで何が問題なのか完全にはわかりませんが、画像が希望する場所から数ピクセル離れているだけの場合は、画像を相対的に配置してみませんか。例えば：

<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle; position: relative; bottom: 2px;">Some text here
</div>

これにより、画像が元の場所から 2px 上に移動します。

于 2010-02-08T21:37:34.520 に答える