ゆうなんとかさんの雑記帳的な。

Twitterで踊ったり音ゲーしたりしてるあの名前がよくわからない人が書いてるらしいよ。

HTMLで縦ぞろえは難しい

今回はCSSで縦中央ぞろえをどうするか、やってみたいと思います。
今回は前提として、

大きさの違う画像みたいなのがいくつかある

縦と横の幅はばらばら

並べるときの縦の最大サイズは決まっている

複数行に渡らない

というのがあります。
どうするかというと、
外のブロック要素にheight指定して、line-heightを同じ値に指定する
これだけです。こうすると複数行にまたがらない限りは縦方向に中央ぞろえしてくれます。
要はこうです。

.vertical-center {
  display: block;
  height: 150px;
  line-height: 150px;
}

条件さえあえば割とお手軽なので最近よく使ってます。IE8以上なら動いてくれるので、特に問題はないですよね。IE6?いえ、知らない子ですね・・・