序章

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

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

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

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

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

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

.avatar {
  vertical-align: middle;
}

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

垂直整列:ベースライン

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

垂直整列:下

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

垂直整列:中央

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

垂直整列:サブ

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

垂直整列:スーパー

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

vertical-align:text-bottom

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

vertical-align:text-top

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

垂直整列:上

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