可変幅のブロック要素をdisplay: inline-blockで中央寄せする方法

2014.08.31 コーディング

ブロック要素を中央寄せする場合、その要素の幅とマージンを指定します。

サイズ固定のブロック要素をdisplay: inline-blockで中央寄せする方法

HTML

<div class="parent">
<div class="child">このブロック要素を中央寄せ</div>
</div>

CSS


.parent {
	width: 100%;
}
.child {
	width: 300px;
	margin: 0 auto;
}

しかしこの方法は、あらかじめ幅を指定しておくことが難しい場合には使えません。

ということで、今回は可変幅のブロック要素を中央寄せする方法をご紹介します。

HTML

<div class="parent">
<div class="child">このブロック要素を中央寄せ</div>
</div>

CSS

.parent {
	text-align: center;
}
.child {
	display: inline-block;
}

クラス名「child」のブロック要素にインライン要素の性質を持たせ、その親となるブロック要素「parent」にインライン要素を中央寄せするための「text-align: center;」を指定します。

【追記】

display:flexを使うことで、より簡単に同様のことができます。下記のページで方法をご紹介していますので、よかったら見てみてください。

display:flexを使って可変幅のブロック要素を中央寄せする方法