縦方向の表示位置を指定する

CSS - vertical-align

vertical-align の概要

CSSプロパティ「vertical-align」は、テキストや画像などのインライン要素、またはテーブルセル要素の縦方向の表示位置を指定する際に使用します。このプロパティは「div」などのブロックレベル要素には適用できませんので、注意が必要です。

<div>
  <img class="center" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="80px">
  猫がくつろいでいますね
</div>
<style>
.center {
  vertical-align: middle;
}
</style>

また、横方向の位置を指定する場合はCSSプロパティ 「text-align」 を使用します。

取りうる値

指定できる値はキーワードや数値でも指定することができます。

{ vertical-align: キーワードまたは数値; }

指定できる値と説明の一覧です。インライン要素のみというのは、テーブルセルへの指定ができないことを意味しています。

説明
baseline初期値です。ベースラインに揃えます
top上端に揃えます
middle中央に揃えます
bottom下端に揃えます
text-topテキストの上端に揃えます(インライン要素のみ)
text-bottomテキストの下端に揃えます(インライン要素のみ)
super上付き文字として揃えます。(インライン要素のみ)
sub 下付き文字として揃えます。(インライン要素のみ)
数値ベースラインを基準に、pc, emなどの単位で指定した値の分だけ移動します。小数点やマイナスの値も指定可能です
パーセントベースラインを基準に移動パーセントの分だけ移動します。基準値はline-heightプロパティによる行ブロックの高さです

またベースラインとは以下の基準点を意味します。

各値の表示例

代表的な値の表示例です。画像とテキストの組み合わせで確認していきます。

topの指定

<div>
  <img class="top" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="80px">
  猫がくつろいでいますね
</div>
<style>
.top {
  vertical-align: top;
}
</style>

middleの指定

<div>
  <img class="middle" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="80px">
  猫がくつろいでいますね
</div>
<style>
.middle {
  vertical-align: middle;
}
</style>

bottomの指定

<div>
  <img class="bottom" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="80px">
  猫がくつろいでいますね
</div>
<style>
.bottom {
  vertical-align: bottom;
}
</style>

使用例

見出しやリスト要素などで、装飾アイコンとテキストの組み合わせるデザインなどで利用したケースです。

<p>好きな動物リストです</p>
<ul>
  <li class="anim1"><img class="middle" src="https://www-creators.com/wp-content/uploads/2017/12/css_list_icon1.png">ペンギン</li>
  <li class="anim2"><img class="middle" src="https://www-creators.com/wp-content/uploads/2017/12/css_list_icon2.png">オオカミ</li>
  <li class="anim3"><img class="middle" src="https://www-creators.com/wp-content/uploads/2017/12/css_list_icon3.png">ニワトリ</li>
</ul>
<style>
* {
  margin: 0;
  padding: 0;
}
ul {
  background: #eef;
}
li {
  list-style: none;
  margin: 5px;
  vertical-align: middle;
  font-size: 12px;
}
.middle {
  margin-right: 8px;
  vertical-align: middle;
}
</style>

仕様書

関連CSSプロパティ