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に入れて読んでます。

投稿者プロフィール

山田 浩太
山田 浩太つくる合同会社 代表社員
2015年5月につくる合同会社を創業しました。
WEBマーケティングとかダイレクトマーケティングには常にアンテナ張ってるマーケティングオタクです。