Perl Web開発者のHTML・CSS入門

画像の縦位置の調整 - アイコンと文字の縦位置をそろえるテクニック

画像の縦位置を調整する方法を解説します。これを理解すると、アイコンと文字をきれいにそろえることができるようになります。

画像の縦位置のデフォルト

まず最初に画像の縦位置のデフォルトを理解しておきましょう。

テキスト

<div style="background:#eef">
  <img src="/images/image-vertical/example.png" width="80"> テキスト
</div>

目を凝らして、よく見てほしいのは、下の部分が空いていることです。よくみてくださいね。下側が空いていますね。

上は、ぴったりと、外側のdivに張り付いています。

HTMLにおいて、画像は、ベースラインと呼ばれる位置から上に向かって描画されます。下側が空いているのは、このためです。

上側のスペースは、自動的に計算されます。この画像よりも高さの高い、他の画像やテキストがあった場合や、高さが設定されている場合は、上側のスペースが0になるとは限らないです。

テキスト

<div style="background:#eef">
  <img src="/images/image-vertical/example.png" width="80"> <img src="/images/image-vertical/example.png" width="120"> テキスト
</div>

まず画像の縦位置のデフォルトをよく覚えてください。ベースラインから上に向かって描画され、上側のスペースは自動計算され、自分より高い他の要素がない場合は、0になります。

画像しかない場合に下のスペースを消す

画像しかない場合に下のスペースを消す一番簡単な方法は、ベースラインを中央にすることです。ベースラインを中央にするには「vertical-align:middle;」を使います。

<div style="background:#eef">
  <img src="/images/image-vertical/example.png" width="80" style="vertical-align:middle;">
</div>

会社やサービスのロゴなど、それしか画像がないという場合に便利です。

テキストが同時に存在している場合は、どうなるでしょうか。見ておきましょう。

テキスト

<div style="background:#eef">
  <img src="/images/image-vertical/example.png" width="80" style="vertical-align:middle;"> テキスト
</div>

んー、よく目を凝らしてください。ビミョーに、テキストの縦位置が、画像の縦位置とずれていませんか? 見えますか。じっと見てください。

文字の縦位置の真ん中を見つめてください。そして、そのまま視線を右側に移動。「テキスト」の中央位置とは、わずかにずれていますね。

アイコンとテキストの縦位置をそろえる

アイコンとテキストの縦位置をそろえましょう。テキストのフォントの種類によって、ベースライン位置が微妙にずれるかもしれないのは、仕方ないですが、なるべく真ん中に調整してみます。

縦位置を指定するには「vertical-align:ピクセル数;」を使います。画像サイズは、アイコンサイズにしてみますね。

テキスト

<div style="background:#eef">
  <img src="/images/image-vertical/example.png" width="60" style="vertical-align:-23px;"> テキスト
</div>

vertical-alignにマイナスのピクセル数を設定するのがポイントです。画像の描画位置を、ベースラインよりも下側からにします。