RedLine Magazine::CSSビギナー向け 陥りがちな罠 Vol.01サンプル

中央寄せの場合・問題編

とりあえず、中央揃えにするために、全体を囲っている#container(赤い線)に少しソースを書き足して中央揃えにしました。が、このままでは#sample01は左揃えの時と同様にページの左上を基点に絶対配置の位置を決めてしまいます。
>>ということで、基準となる点を設定してあげると解決

CSSソース

body{
	background:#ffffec;
	text-align:center;
	}
#container{
	width:60%;
	margin:0 auto;
	text-align:left;
	border:1px solid #900;
	}
div#sample01{
	position:absolute;
	top:100px;
	left:50px;
	width:150px;
	height:150px;
	background:#9c0;
	}

htmlソース

<div id="container">
<div id="sample01">
<p>div id="sample01"</p>
</div>
</div>

>>次のページ：中央寄せの場合・解決編へ

>>CSSビギナー向け 陥りがちな罠Vol.01へ戻る