序章

vertical-align は、テーブルセルのコンテンツ、または残りのインラインフローに対するインライン要素の垂直方向の配置を定義します。

vertical-alignは、％または length の値を取るか、次の8つのキーワードのいずれかを取ることができます。

  • baseline： デフォルト。 親のベースラインに位置合わせされた要素のベースライン。
  • bottom：要素の下部が行の完全な下部に位置合わせされます。
  • middle：要素の中央が親のエックスハイトの半分に揃えられています。 エックスハイトは、文字の昇順または降順を除いたテキストの高さです。
  • sub：親の添え字ベースラインに位置合わせされた要素のベースライン。
  • super：親の上付き文字ベースラインに位置合わせされた要素のベースライン。
  • text-bottom：要素の下部をテキストの下部に揃えます。
  • text-top：テキストの上部に位置合わせされた要素の上部。
  • top：行の先頭に位置合わせされた要素の先頭。

length 値が指定されている場合、要素は親のベースラインより上の指定された長さに位置合わせされます。

％値が指定されている場合、要素は親のベースラインより上の指定された％に位置合わせされ、％は行の高さへの参照になります。

これは、vertical-alignを使用した例です。

.avatar {
  vertical-align: middle;
}

例

vertical-alignのさまざまなキーワード値の効果を視覚化するのは難しい場合があるため、さまざまな値で配置されたインラインの貝殻絵文字（🐚）の例を次に示します。

垂直整列：ベースライン

サミーは海岸で貝殻🐚を販売しています。

垂直整列：下

サミーは海岸で貝殻🐚を販売しています。

垂直整列：中央

サミーは海岸で貝殻🐚を販売しています。

垂直整列：サブ

サミーは海岸で貝殻🐚を販売しています。

垂直整列：スーパー

サミーは海岸で貝殻🐚を販売しています。

vertical-align：text-bottom

サミーは海岸で貝殻🐚を販売しています。

vertical-align：text-top

サミーは海岸で貝殻🐚を販売しています。

垂直整列：上

サミーは海岸で貝殻🐚を販売しています。