文字の上下位置を調整する方法 (vertical-align) [CSS]

vertical-align

参考：

vertical-align | MDN

使い方

• baseline：ベースラインを親要素のベースラインに揃える
• sub：ベースラインを親要素の下付き位置に揃える
• super：ベースラインを親要素の上付き位置に揃える
• text-top：上端を親要素テキストの上端に揃える
• text-bottom：下端を親要素テキストの下端に揃える
• middle：要素の中央を親要素テキストの中央に揃える
• top：上端を行の上端に揃える
• bottom：下端を行の下端に揃える

参考：

文字を数値で指定して上下に動かす | 1up ホームページ作成

CSS でテキストの一部だけ上下にずらす方法 | monostyle

vertical-align – 垂直の位置を指定するサンプル | ITSakura

vertical-align – 上下の位置 | fromkato.com

vertical-align が効かない時はこれを試す | unitopi

枠内のテキストの縦位置を CSS で指定する | iPentec

CSS で文字を上下左右中央に配置する方法いろいろ | 株式会社しずおかオンライン

vertical-align | スタイルシートリファレンス

vertical-align – 縦方向の文字位置 | CMAN

行の高さを調節する (line-height)

参考：

line-height で行間を調整する方法／おすすめの値は？ | サルワカ

ウェブデザインにおける line-height について | Rriver

line-height | MDN

文章に並ぶアイコンの位置を調整したい

参考：

文中のアイコンが上下にズレてしまう問題 – Qiita

vertical-align が効かない

使用できないケース

• ブロック要素
• 絶対位置指定を使用している (position: absolute を指定した要素)
• 固定位置指定を使用している (position: fixed を指定した要素)
• フローティング要素 (float を指定した要素)
• フレックスボックスを使用している (親要素に display: flex が指定されている場合)

代替案

• display: table-cell を指定する。
• 要素を入れ子にしてレイアウトを調整する。
• ブロック要素内で1行のみの場合 → line-height を調整する。
• フレックスアイテムの場合 → align-items / align-self で中央寄せする。

参考：

vertical-align が効かないパターンと、効くパターン | HPcode

vertical-align が効かない人は多分勘違いしている | ミフネWEB

要素を垂直方向縦の中央真ん中に配置したいのに vertical-align: middle が効かない時の対応方法 | デザイナーブリッジ

vertical-align: middle が効かない原因と代替案 | マンガでわかるホームページ作成

vertical-align が効かない時の対処法 | White Space

vertical-align doesn’t work on flex item – Stack Overflow

Flexbox vertical alignment not working – Stack Overflow