web-dev-qa-db-ja.com

画像を線の中央に垂直に配置する方法は？

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

例（読みやすくするためにインラインスタイル）：

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

これがjsFiddleの例です 。この例は、なぜvertical-align: middle 動作しません。

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

私が読んだこと：

CSSを使用して画像の横のテキストを垂直方向に配置するにはどうすればよいですか？ （画像が大きい場合に対処しますが、ここでは適用されないようです）

vertical-alignについて

htmlcssalignmentvertical-alignment
27
Jeremy Kauffman

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

illustration of a vertically aligned image compared to the surrounding text's baseline and mean line

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

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

0.25 emの値は、試してみたときに見栄えが良かったことに基づいて、かなり任意に選択されています。好みに合わせて自由に調整できます。

これが マージン調整の前後の比較 で、フォントサイズが異なります。

31
Pär Wieslander

画像をdiv要素の背景として設定してみませんか？つまり：

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

これにより、画像が左上に配置されます。少なくともそれが私のやり方です。

よろしく

4
Nik Chankov

親をコンテナにしてみてくださいdisplay: tableおよびdisplay: table-cell。その後 vertical-align: middleは「テーブル方式」で機能するはずです。

3
vtambourine