【CSS Modules】vertical-alignプロパティの使い方

vertical-alignプロパティは、インラインレベル要素やテーブルセルの内容を、その行ボックスまたはセル内で垂直方向にどのように配置するかに関する設定を保持するプロパティです。このプロパティは、主にテキスト行の中に画像やアイコンなどが混在する場合や、HTMLのテーブル内でセルの内容を揃える際に利用されます。

適用できる要素は、displayプロパティがinline、inline-block、inline-tableに設定された要素、およびテーブルのセル要素（<td>や<th>など）に限られます。ブロックレベル要素にはこのプロパティは適用されませんのでご注意ください。

指定できる値にはいくつかの種類があります。例えば、baselineは要素のベースラインを親要素のベースラインに揃えるデフォルト値です。topは要素の上端を行ボックスまたはセル内の最上部に、bottomは要素の下端を最下部に、middleは要素の中央を中央に揃えます。他にも、text-topやtext-bottomは現在のフォントの上端や下端に揃え、subやsuperは要素を下付き文字や上付き文字のように配置します。

また、10pxのような長さの単位や、20%のようなパーセンテージで値を指定することも可能です。これらはベースラインからのオフセット量を指定し、パーセンテージで指定した場合は、要素のline-heightプロパティに対する相対値として計算されます。

このプロパティを適切に活用することで、ウェブページ上でのテキストとインライン要素の視覚的な整合性を高め、読みやすいレイアウトを実現できます。ただし、モダンなCSSレイアウトであるFlexboxやGridでは、align-itemsやalign-selfといった異なるプロパティが垂直方向の配置を制御する点も認識しておくと良いでしょう。

Copy
1vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <length> | <percentage>;

引数なし

引数はありません

戻り値なし

戻り値はありません