[CSS]横並びボックスのテキストを上下中央に揃える方法

CSSを使って、横一列に並んだブロックのテキストを上下中央に揃えてレイアウトしたい場面ってありませんか？

同じ文字数（行数）で揃っていれば特に問題ないのですが、1行だったり2行だったりバラバラのときに高さが揃わないとなんだかデザイン的にも気持ち悪いです。

Bootstrapのcol-*とかを使っていて、このやり方がいつもわからなくなるので。

HTML

CSS

h2{
	display:table;
	min-height:4em;
}
span{
	display:table-cell;
	vertical-align:middle;
	text-align: center;
}

簡単ですね。

親要素にdisplay:table、heightで高さ指定、子要素にdisplay:table-cellとvertical-align:middleでいけます。

デモはこちら

この本はとても読みやすく重宝しています。紙の本とKindleに入れて読んでます。
[amazonjs asin=”B00M0ESXUI” locale=”JP” title=”Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法”]