Web production note

　【更新日 : 】

【css】要素を上下左右中央揃えにする

Category：
css
Tags：
,

現代の実装では display: flex; や display: grid; で実装することを推奨します。

「display: table-cell;」「vertical-align: middle;」を使った上下左右中央揃えのサンプルです。
少し階層が深くなっていますが、他の箇所に影響を与えたくない場合等に利用できるかと思います。

サンプルhtml

<ul>
	<li><a href=""><p><span>テキスト</span></p></a></li>
	<li><a href=""><p><span>テキスト<br>テキスト</span></p></a></li>
	<li><a href=""><p><span>テキスト</span></p></a></li>
</ul>

サンプルcss

li {
	display: inline-block;
	width: 120px;
	margin-right: -1px;
	border: 1px solid #ccc;
	vertical-align: top;
}
li a {
	display: block;
}
li a:hover span {
	background: #f0f0f0;
}
li p {
	display: table;
	table-layout: fixed;
	width: 100%;
	text-align: center;
}
li span {
	display: table-cell;
	height: 80px;
	padding: 5px;
	background: #fff;
	vertical-align: middle;
}

サンプルsass

li {
	display: inline-block;
	width: 100px;
	border: 1px solid #ccc;
	vertical-align: top
	a {
		display: block;
		&:hover {
			span {
				background: #E0E0E0;
			}
		}
	}
	p {
		display: table;
		table-layout: fixed;
		width: 100%;
		text-align: center;
	}
	span {
		display: table-cell;
		height: 50px;
		padding: 5px;
		background: #fff;
		vertical-align: middle;
	}
}

「display: table-cell;」の場合「min-height」が効かないため、高さは「height」でpx固定していますが、「display: table-cell;」 を指定している場合、中の要素が増えるとheightもそれに合わせて増加してくれるため、「min-height」と同じ感覚で使用できます。

参考リンク