こんにちは、後藤です。
今日もCSSのプロパティについてブログを書きたいと思います。

 

CSSでは、コンテンツの行揃えや、垂直方向の位置揃えを調節することができます。
テキストはもちろん、画像なども調整することができます。
今回は、コンテンツの位置の揃え方を紹介します。

 

text-alignプロパティ

text-alignプロパティでは、コンテンツの行揃えを指定することができます。

 

left：左揃え

right：右揃え

center：中央揃え

justify：両端揃え

 

 

vertical-alignプロパティ

vertical-alignプロパティでは、行の中での垂直方向の位置揃えを指定することができます。

 

baseline：ベースライン

top：行の上辺

text-top：フォントの上辺

middle：フォントの小文字xの中央

text-bottom：フォントの下辺

bottom：行の下辺

 

 

ベースラインからの距離で位置揃えを調節することも可能です。

 

 

また、「上付き文字」や「下付き文字」を最適な位置に揃えて表示することも可能です。

 

super：上付き文字

sub：下付き文字

 

 

まとめ

今回は、コンテンツの行揃えや、垂直方向の位置揃えの仕方を解説しました。
ユーザーの見やすさを考えて、コンテンツの位置を揃えたいですね。