目次
こんにちは、後藤です。
今日もCSSのプロパティについてブログを書きたいと思います。
CSSでは、コンテンツの行揃えや、垂直方向の位置揃えを調節することができます。
テキストはもちろん、画像なども調整することができます。
今回は、コンテンツの位置の揃え方を紹介します。
text-alignプロパティ
text-alignプロパティでは、コンテンツの行揃えを指定することができます。
left:左揃え
right:右揃え
center:中央揃え
justify:両端揃え
1 |
.sample{text-align: center;} |
vertical-alignプロパティ
vertical-alignプロパティでは、行の中での垂直方向の位置揃えを指定することができます。
baseline:ベースライン
top:行の上辺
text-top:フォントの上辺
middle:フォントの小文字xの中央
text-bottom:フォントの下辺
bottom:行の下辺
1 |
.sample{vertical-align: text-top;} |
ベースラインからの距離で位置揃えを調節することも可能です。
1 |
.sample{vertical-align: 15px} |
また、「上付き文字」や「下付き文字」を最適な位置に揃えて表示することも可能です。
super:上付き文字
sub:下付き文字
1 |
.sample{vertical-align: super;} |
まとめ
今回は、コンテンツの行揃えや、垂直方向の位置揃えの仕方を解説しました。
ユーザーの見やすさを考えて、コンテンツの位置を揃えたいですね。