cssでの中央ぞろえを行う場合、横は案外簡単なんですが、縦の中央ぞろえは結構難しかったりします。
ざっとまとめると以下のようなかんじでしょうか。
- テキストのみの1行タイプであればline-height、
- ブロックレベルではposition:absoluteでtop:50%とネガティブマージン
- またそもそもheightを設定せず、paddigだけで幅をとる
- テーブルやインライン要素ではvertical-align:middleをとる
特にvertical-alingなんですが、きかないことが多いんですよね・・table要素やdisplay:table,display:table-cellを使えばきくんですが、一般的なインラインではきかないようにみえることがおおいです。
で、調べてみるときいてないのではなくて基準が違うようですね。
https://github.com/umanari145/css
上記のソースのvertical.htmlの例をみてもらえればわかりますが、要素がすべて同じ要素だと上にそろってしまい、middleを設定してもbottomを設定しても変わりません。ただvertical-align:-20pxなどはききます。
ただ高さが全く違う要素を設定した場合はこれが自由にききます。このことからインラインのvertical-alignの基準は親要素ではなく、お互いの子要素をみて基準を決めているようです。
つまり各要素の中心ということになるので、インライン要素の高さがすべて同じ場合、middleを指定してもすべて同じなのでうごかないということになります。
※display:table-cellは親要素が基準になります。
参考
vertical-align: middle についての覚書
高さの異なるボックスを横に並べるならfloatよりinline-blockが便利
