CSSを使って横並びレイアウト

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

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

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

HTML

 

 

 

テキストテキストテキストテキストテキスト

 

 

 

テキストテキストテキスト

 

 

 

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

 

 

CSS

簡単ですね。

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

デモはこちら

この本はとても読みやすく重宝しています。紙の本とKindleに入れて読んでます。