垂直方向の配置を制御する「vertical-align」プロパティ

CSSの「vertical-align」プロパティは、インライン要素やテーブルセル内の要素などで、垂直方向に配置される際の位置を指定するために使用されます。
以下に、このプロパティの主な特徴と使い方について解説します。

特徴

対象要素

• ・インライン要素（行内要素）やテーブルセル内の要素に対して使用されます。
• ・ブロック要素には通常影響を与えません。

値

1. baseline
   テキストのベースライン（基準線）に基づいて配置されます。これがデフォルト値です。
2. top
   要素の上端が行の上端に揃えられます。
3. middle
   要素が行の中央に揃えられます。
4. bottom
   要素の下端が行の下端に揃えられます。
5. text-top
   テキストの先頭が行の上端に揃えられます。
6. text-bottom
   テキストの末尾が行の下端に揃えられます。

使い方の例

/* テキストの中央に配置 */
span {
  vertical-align: middle;
}

/* テキストの下端が行の下端に揃えられる */
img {
  vertical-align: text-bottom;
}

重要なポイント

基準線の理解

baselineは、テキストの基準線に基づいて配置されます。
これは文字の底辺を表し、文字の大きさによって変化します。

行の高さの影響

vertical-alignは、要素が存在する行の高さに影響を与えます。
したがって、行の高さも考慮する必要があります。

テーブルセルでの利用

テーブルセル内の要素の配置にも使われ、特に画像などをテキストと揃える場合に便利です。

まとめ

このプロパティを上手に活用することで、テキストや画像などの要素を垂直方向に適切に配置することができます。