27

画像が行の高さよりも小さい場合、アイコンを行の中央に配置する最良の方法は何ですか?

例 (読みやすいようにスタイルをインライン化):

<div style="line-height: 20px">
  <img style="width: 12px; height: 12px;"/>
  Blah blah blah
</div>

jsFiddle の例を次に示します。vertical-align: middleこの例は、が機能しない理由も示しています。

divのテキストに対してimgを中央に配置したい。つまり、テキストが複数の行に折り返されていても、画像は単一の行に対して中央に配置されます。理想的には、ソリューションには画像にマージン/パディングを設定する必要がなく、行の高さがわからなくても機能します。

私が読んだこと：

CSS を使用して画像の横にあるテキストを垂直方向に揃えるにはどうすればよいですか? （画像が大きい場合を扱いますが、ここでは当てはまらないようです）

垂直方向の配置について

4

3 に答える 3

32

問題の原因は、画像が周囲のテキストのx 高さに対して垂直方向に中央に配置されていることです。これは、周囲のテキストのベースラインと平均線が含まれている拡大スクリーンショットで非常に明確に見ることができます:

周囲のテキストのベースラインと平均線と比較した垂直方向に配置された画像の図

画像は、使用するフォント サイズや行の高さに関係なく、同じように配置されます。したがって、印刷上の意味では、画像は実際には正しく垂直方向に配置されています。ただし、画像の中心が平均線に近づくように配置を調整したい場合は、次のコマンドを使用して少し上に移動しますmargin-bottom。

img.icon {
    margin-bottom: 0.25em;
}

0.25 em という値は、私が試してみてよさそうなものに基づいて、かなり恣意的に選択されました。好みに合わせて自由に調節してください。

これは、margin-adjustment 前後のフォント サイズの比較です。

于 2010-06-15T20:10:51.560 に答える
4

div要素の背景に画像を設定してみませんか？すなわち:

<div style="line-height: 20px; background: url(path/image.gif) 5px 5px; no-repeat; padding-left: 40px;">
  Blah blah blah
</div>

これにより、画像が左上に配置されます。少なくとも私はそうします。

よろしく

于 2010-06-15T18:53:36.270 に答える
3

親コンテナdisplay: tableとを作成してみてくださいdisplay: table-cell。その後vertical-align: middleは「テーブル方式」で動作するはずです。

于 2010-06-15T19:19:30.403 に答える