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

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA