【初心者向け】文字の上揃え、下揃えが効かないときに確認する3つの事

どうも7noteです。文字の上揃え、下揃えが効かないときに確認する3つの事

vertical-align: middle;を使って、文字や画像の上下の位置を上揃えにしたり、下揃えにしたりしたいのに上手く効かない！
そんな時に確認しておきたい3つのポイントをご紹介したいと思います。

1. vertical-align: center;をブロック要素に効かせようとしている

style.css

p {
  vertical-align: middle;  /* これは効きません！ */
}

基本的に、インライン要素、ブロック要素（とtable-cell要素）にしかvertical-alignは効きません
もし間違えてspanじゃなくpタグに書いていた！という場合はそれを直すだけで一発解決かも？

※ブロック要素かインライン要素かを調べる

2. 親要素のflexboxの影響を受けてる

style.css

p {
  display: flex; /* 親要素にflexboxが効いていると・・・ */
}

p span {
  vertical-align: middle;  /* これは効きません！ */
}

親要素で位置を調節しているので、優先順位がdisplay: flex;が優先されてしまいvertical-alignが効かなくなります。
併用するときは注意が必要！！

3. 揃えたい要素が浮いている

style.css

p span {
  position: absolute;  /* position: fixed;等も */
  float: left;         /* floatも一緒に使っていると・・・ */

  vertical-align: middle;  /* これは効きません！ */
}

イメージとしては**position: absolute;やfloatは浮いている状態なので、浮いているものに対してvertical-alignを指定しても効きません。**
こちらも注意しましょう。

まとめ

初心者の方は結構ひっかかりやすいvertical-alignの罠ですが、今回紹介したポイントさえしっかり抑えていれば難しいことはないと思います！
ただ忘れやすいので、「vertical-alignはブロック要素には効かない」っと3回くらい唱えて覚えてもいいかもしれません。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ