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

2016年6月24日 2017年9月13日山田浩太

山田浩太

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

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

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

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

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」の設計手法"]

山田浩太つくる合同会社代表社員

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