floatで中央揃えにする

複数のブロック要素を中央揃えで並べる方法。

サンプルコード

HTML

<div id="sample">
	<ul>
		<li>ブロック01</li>
		<li>ブロック02</li>
		<li>ブロック03</li>
		<li>ブロック04</li>
		<li>ブロック05</li>
		<li>ブロック06</li>
	</ul>
</div>

CSS

#sample {
	position: relative;
	overflow: hidden;
}
#sample ul {
	position: relative;
	left: 50%;
	float: left;
}
#sample li {
	position: relative;
	left: -50%;
	float: left;
}

ulを親要素(#sample)の中央位置から開始するようにして、liをulの幅の半分だけ左に移動させます。
ulにfloatを指定しているので、ulの幅は中身の合わせてサイズが変更されます。
ulが#sampleからはみ出す場合があるので、#sampleにoverflow:hidden;を指定。

floatで中央揃えにするデモページ
　

【参考サイト】

• floatで並べた li 要素の中央寄せ | Web Design Leaves