なんちゃってウェブ系エンジニアの備忘録

某IT企業で働くなんちゃってウェブ系エンジニアが技術やデザインなど役に立ちそうなものなどを備忘録として載せていきます

liをfloatで横並べたものをセンタリングさせる方法

ページャなどでページ遷移する際のリンクって、
ulを使って、1、2、3・・・と数字が横並ぶことはよくありますね。

例えばコレとか。
f:id:owen11:20131009122544p:plain

floatで並んだリスト全体をセンタリングさせようと思っても、
リストを囲んだulの幅を指定せず、「margin:0 auto;」や「text-align:center;」など
行ってもセンタリングすることができません。
幅を指定すれば可能だが、必ずも横幅を設定したくないというケースも
あるかと思います。

以下の方法を行うことにより、幅を指定しなくてもセンタリングすることができます。

HTML

<div class="page">
	<ul>
		<li><a href="#">&#8249;</a></li>
		<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="#">&#8250;</a></li>
	</ul>
</div>

CSS

div.page {
	background-color: #999999;
	overflow: hidden;
	width:500px;
	position: relative;
}
ul {
	position: relative;
  	left: 50%;
  	float: left;
}

ul > li {
	float: left;
	list-style: none;
	margin-right: 1em;
	position: relative;
	left: -50%;
}

と、こんな感じに横並びが増えても、常にセンタリングするようにしてくれます。
「position」や「left」を使ってul全体をセンタリングするという手法でしょうか。

サンプルはこちら

今のところ、上記の方法がコードが少ない分、シンプルでかつ簡単で実装できるので、
現時点では良い方法かと思いますが、他に良い方法があれば適宜追記していきたいと
思います。

参考:
http://liginc.co.jp/designer/archives/1637

追記

読者より、ul全体をdisplay:tableを使ってセンタリングする方法があるそうです。
詳細はコチラ