vertical-alignが使えない時の解決方法

verticalalign

ナビゲーションメニューやページネーションの配置など、divの中に要素を入れる場合は多々あります。

 

そんな時、縦の位置が真ん中にならない!と悩むことはありませんか?

 

CSSでvertical-align:middleと指定しているのに効かない!

 

たとえば、こんな感じにかっこわるくなっちゃう。

 

  • HOME
  • ABOUT
  • GALLERY
  • CONTACT

 

vertical-alignを使うためにはポイントがあります。

 

vertical-align:middleが使えるのはインライン要素とテーブルセルです。ブロックレベル要素には適用できません。

つまり、divやpなどのブロック要素には使えないということです。

じゃあ、divの中で縦位置をそろえるにはどうしたらいいの?

 

ブロック要素の場合はdisplay:table-cell;をつける

これでvertical-align:middleが使えるようになります。

上のかっこわるかったナビゲーションにdisplay:table-cell;とvertical-align:middleを加えてみると・・

  • HOME
  • ABOUT
  • GALLERY
  • CONTACT

縦位置が真ん中になりました。