[CSS]liをfloatして横に並べてそれを中央配置にするオレ的まとめ

もうタイトルが何言ってるか分からないですが読んだ通りですはい。

いや、説明するとliをfloat:leftすると左揃えになってしまうものを中央に配置してしまおうと言うことです。分かったかな？
方法は何通りかあると思いますが、これならOK的なものを紹介します。

display:inline-blockを使う方法
1. html
2. CSS
  1. なぜinline-blockなのか
おまけのposition: relative;を使う方法
1. html
2. CSS
まとめ

display:inline-blockを使う方法

display:inline-blockを使う方法は横並びになったliとliの間に隙間が空くのが特徴。
なので全体の幅が決まってる場合は使わない方がいいですね。

html

<ul class="horizon01">
	<li><a href="#">Link01</a></li>
	<li><a href="#">Link02</a></li>
	<li><a href="#">Link03</a></li>
</ul>

CSS

ul.horizon01 {
	text-align: center;
	background: #ccc;
}
ul.horizon01 li {
	list-style: none;
	display: inline-block;
	*display: inline; /*--IE用のハック--*/
	*zoom: 1; /*--IE用のhasLayoutをtrueにするための記述です--*/
}

サンプルはこちら
inline-blockはIE7以下はきかないので*display: inline;と*zoom: 1;で対応しています。
※hasLayoutについてはこの辺を読んでみてください。

なぜinline-blockなのか

inlineでも良さそうですがinline-blockにすることで

widthとheightが指定できる
上下左右にmarginとpaddingを指定できる
text-alignを親ブロックに指定できる

inline-blockなわけです。

おまけのposition: relative;を使う方法

html

<div class="horizon02">
	<ul>
		<li><a href="#">Link01</a></li>
		<li><a href="#">Link02</a></li>
		<li><a href="#">Link03</a></li>
	</ul>
</div>

CSS

.horizon02 {
	position: relative;
	overflow: hidden;
}
.horizon02 ul {
	position: relative;
	left: 50%;
	float: left;
}
.horizon02 ul li {
	list-style: none;
	position: relative;
	left: -50%;
	float: left;
}

サンプルはこちら

まとめ

簡単にできそうでできない中央配置、やってみると意外と簡単です。
グーグル先生に聞くと幅を指定する方法がやたら出てきますが、中央配置の出番って「次の○件へ」みたいなページャーが多いので幅指定はできないですよね。
この方法だったら幅指定する必要もないので。