画像とテキストを揃える

Question

高さ18ピクセルの画像とその隣のテキストを中央揃えにしたいと考えています。私が使用するコードは次のとおりです。

<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ピクセルの理由は何ですか？

ありがとう

Answer 1

1. スタイルをリセットすることを忘れないでください（マージン/パディング）：div、img、span {マージン：0;パディング:0;境界線:0 }
2. 垂直整列が機能するために、あなたの要素 しなければならない 私はインラインです。
3. テキストを垂直に並べるための古典的な選択は、コンテナに等しいラインの高さを与えることです。

例えば ​​：

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

Answer 2

たぶん、あなたはそこにあなたがゼロ幅を取り除くか、設定を取得する必要がどこかに境界線を持っている？

Answer 3

ここで何が問題なのか完全には理解できませんが、画像が配置したい場所から数ピクセル離れているというだけの場合は、画像を相対的に配置するだけではどうでしょうか。例えば：

<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>

これにより、画像が元の位置から 2 ピクセル上に移動します。