【css】フッターの文字を上下左右ともにセンタリング

この記事について

つまずきポイント要約

• footerのwidthが100%だとmargin:0 autoが効かず、text-alignとvertical-alignの両立にてこずった

フッターの文字を上下左右ともにセンタリングしたときの覚書

左右のセンタリングだけだと、footer にtext-align を指定するだけで簡単だった。上下のセンタリングだけも display: table-cell が有効だった。しかし、footer の width が 100% では、margin:0 auto が効かず、text-align と vertical-align の両立にてこずった…。

css

#footer {
	text-align:center; /* footer 内の div を左右中央にする */
	border-top: 1px solid #009933;
	background: #fff;
	width:100%;
	height: 30px;
	box-sizing: border-box; /* パディングとボーダーを幅と高さに含める */
	clear: both;  /* ２カラム解除 */
}

#footer > div {
	/* text-align:center を有効にするため inline 化 */
	display: inline-block;
	background: #999; /* 幅を視覚化するために色をつけている */
}

/* 上下のセンタリング */
#footerText {
	height: 30px; /* footer と同じ高さを指定 */
	display: table-cell;
	vertical-align: middle;
}

html

<div id="footer">
<div>
<div id="footerText">フッターの文字</div>
</div>

</div>