CSSのテキストのベースライン（baseline）とは？
ベースライン（baseline）とはアルファベット等の文字の基準となる線で、親要素のベースラインに合わせます。またvertical-alignは、ブロック要素だと効かない為インライン要素にする必要があります。
CSSのテキストのベースライン（baseline）とは？
今回は、CSSのテキストのベースライン（baseline）の説明をいたします。
ベースラインとは、エックスハイトの下側のことを言います。
エックスハイトとはアルファベットの小文字表記において『x』の上から下までの部分のことを言います。
また、『b』『d』のようなアルファベットは、エックスハイトよりも文字の位置が上に突き出る部分があり『b』『d』のように上に突き出るアルファベットのことをアセンダと言います。
『g』『p』などのようなアルファベットは、エックスハイトよりも文字の位置が下に突き出る部分があり『g』『p』のように下に突き出るアルファベットのことをディセンダと言います。
下記の図を参考にして下さい。
vertical-alignとは
vertical-alignとは、行内のテキストまたは、画像の縦位置の方向に揃え位置を指定するプロパティです。
下記のサンプルコードを参考に見ると、左から
・baseline…初期位置で、親要素のベースラインに合わせます。
・top…行ボックスの上端に合わせます。
・middle…親要素の中心に揃えます。
・bottom…行ボックスの下揃えに合わせます。
・text-top…親要素の文字の上揃えに合わせます。 (テーブルセルへの指定はできません。)
・text-bottom…親要素の文字の下端に合わせます。 (テーブルセルへの指定はできません。)
・super…上付き文字です。(テーブルセルへの指定はできません。)
・sub…下付き文字です。 (テーブルセルへの指定はできません。)
下記のサンプルコードを参考にして下さい。別ウィンドウで開いて大きい画面で見るとわかりやすいです。
vertical-alignが効かない
インライン要素以外に適用している
vertical-alignが効かない時の対処法としては、vertical-alignはインライン要素に効くのでブロックレベル要素の『divタグ』や『pタグ』には効かないため、ブロックレベル要素をインライン要素に変更する必要があります。
vertical-alignを指定したい場合には、『divタグ』や『pタグ』にdiplay: inline、diplay: inline-blockをCSSで指定する必要があります。
下記のサンプルコードを参考にして下さい。
display: inline;
.baseline {
vertical-align: baseline;
display: inline;
}CSSの文法ミスや優先順位の問題
またにCSSの文法エラーや優先順位の問題でも効かない場合がありますので、念の為確認することをおすすめします。
詳細は下記を参考にしてみて下さい。
