SHERBETS » Blog Archive » ブロック要素のセンタリング

ブロック要素のセンタリング

ブロック要素のセンタリングについての備忘録です。

○ ブロック要素のセンタリング

.box
{
	text-align: center;
	width: 100%;
}
.contents
{
	text-align: left;
	margin: 0px auto;
	width: 150px;
}

.box

{

text-align: center;

width: 100%;

}

.contents

{

text-align: left;

margin: 0px auto;

width: 150px;

}

センタリングさせたい要素の左右のマージンをauto、幅、text-align: left;を指定し、その親要素にtext-align: center;を指定します。

○ 幅の決まっていないブロック要素のセンタリング

.ico-box
{
	text-align: center;
}
.ico-common
{
	display: inline-block;
}

.ico-box

{

text-align: center;

}

.ico-common

{

display: inline-block;

}

センタリングさせたい要素をインライン要素にし、その親要素にtext-align: center;を指定します。

両方のサンプルはこちら。

参考にした記事はこちらとこちら。