CSS

The CSS alignment-adjust property is used to fine-tune the baseline of text or elements to control their vertical alignment.

alignment-adjust

　alignment-adjustプロパティは、インライン要素やテキストのベースラインを調整するために提案されたプロパティです。このプロパティは、要素の垂直方向の配置を微調整し、他の要素との整合性を保つことを目的としています。

基本的な機能

目的
要素のベースラインを調整し、異なる言語やフォントが混在する場合でも、テキストの垂直方向の配置を統一する。
使用方法

CSS

.element {
	alignment-adjust: <値>;
}
値
数値
ピクセル（px）、パーセンテージ（%）、エム（em）などで指定。
キーワード
auto
デフォルトのベースライン位置を使用します。
baseline
フォントの標準的なベースラインに合わせます。
before-edge
ボックスの上端にベースラインを合わせます。
text-before-edge
テキストの上端にベースラインを合わせます。
middle
ボックスの中央にベースラインを設定します。
central
中央ベースラインに合わせます（数式や特定の記号の配置に使用）。
after-edge
ボックスの下端にベースラインを合わせます。
text-after-edge
テキストの下端にベースラインを合わせます。
ideographic
表意文字（漢字など）のベースラインに合わせます。
alphabetic
アルファベット文字のベースラインに合わせます。
hanging
吊り下げベースラインに合わせます（デーヴァナーガリー文字などの配置に使用）。
mathematical
数学的なベースラインに合わせます。
top
ボックスの上端にベースラインを合わせます（before-edgeと同義）。
center
ベースラインをボックスの中央に設定します（middleと同義）。
bottom
ボックスの下端にベースラインを合わせます（after-edgeと同義）。

注意点

サポート状況
現在、このプロパティは主要なブラウザでサポートされていません。そのため、alignment-adjustを使用しても効果が現れない場合があります。
仕様の状態
このプロパティは CSS3の提案段階にあり、正式な勧告には至っていません。

代替手段

　alignment-adjustがサポートされていないため、以下のプロパティや手法を使用して同様の効果を得ることができます。

vertical-align

　インライン要素やテーブルセルの垂直方向の配置を調整します。

CSS

.text {
	vertical-align: middle;
}

line-height

　行の高さを調整し、テキストの垂直方向の配置を制御します。

CSS

.text {
	line-height: 1.5;
}

Flexboxを使用

　Flexboxを使用して、要素の垂直方向の配置を柔軟に調整できます。

CSS

.container {
	display: flex;
	align-items: center; /* 垂直方向の中央揃え */
}

Gridレイアウトを使用

　Gridレイアウトでも同様に配置を調整できます。

CSS

.container {
	display: grid;
	align-items: center; /* 垂直方向の中央揃え */
}

まとめ

　alignment-adjustプロパティは、要素の垂直方向の配置を微調整するための便利なプロパティとして提案されましたが、現在のところブラウザのサポートがなく、実用的ではありません。代わりに、vertical-alignやline-height、Flexboxや Gridレイアウトなどの他の CSSプロパティや手法を使用して、目的のレイアウトを実現することをお勧めします。