floatで横並びにしたリストをセンタリングする方法

複数の<li>タグをfloatで横並びに配置した際に、全体の<ul>をセンタリング表示したい時ってありますよね。例えば、ページネーションなどがいい例ですが、よくあるセンタリングの指定方法の横幅を指定して「margin: 0 auto;」をこの<ul>タグに指定しても真ん中には寄ってくれません…。ましてや、「text-align: center;」も同様です…。

こういった場合は、「position: relative;」を利用してセンタリング表示することが出来るんです。

● サンプルを見ながら確認していきます。

デモサンプル

▼HTML シンプルなページネーションのようなものがあるとします。

<div class="pagenation">
	<ul>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
	</ul>
</div>

<ul>

</ul>

</div>

▼CSS

.pagenation {
	position: relative;
	overflow: hidden;
}
.pagenation ul {
	float: left;
	left: 50%;
	position: relative;
}
.pagenation ul li {
	float: left;
	left: -50%;
	position: relative;
}

.pagenation {

position: relative;

overflow: hidden;

}

.pagenation ul {

float: left;

left: 50%;

position: relative;

}

.pagenation ul li {

float: left;

left: -50%;

position: relative;

}

全体を囲っている<div class=”pagenation”>の左上を基準点とし、リスト全体の<ul>要素を右に50%の位置に移動します。さらに、各リストの<li>要素を左に50%の位置に移動しています。

ちょっとややこしいですが、指定している内容は単純なことですね。
ページネーションやリスト配置は、頻繁に利用されていると思いますのでご参考までに・・・。