ページネーションもフッターのメニューもスライダーの丸ポチも！数も幅もわからなくても中央揃えする方法

ちょっと個人的に感動したソースに出会ったので引用・解説します。
リストの中身の、数も幅もわからなくても中央揃えできるんだ～って感心したのです。
これでページネーションもフッターのメニューもスライダーの丸ポチも簡単に実現出来ます♪

<ul id="pagination">
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><span>3</span></li>
</ul>

何の変哲もないページネーション用リストです。
選択されてるものはaでなくてspanで囲みます。

ul#pagination {
	margin-bottom: 20px;
	text-align: center;
}

親要素になるulにはtext-align: center;を指定しましょう。

ul#pagination li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	line-height: 1.2;
	margin: 0 3px;
}

中身のliはインラインブロックを指定したいとこですが！インラインブロック、IE6，7では対応しとらんのです。
ですので、この二行が効いてきます！

*display: inline;
*zoom: 1;

アスタリスクをプロパティ名の直前につけるハック。IE6,7向けです。
インラインブロック非対応のブラウザに対しては、display: inline;を指定。
ついでにzoom: 1;　でhasLayoutを有効化してるのですね。

ul#menu li a,
ul#menu li span {
	display: block;
}

もしも背景を塗りつぶしたいなら、aやspanをブロック要素に指定してあげます。
これで背景が塗りつぶせます。
背景を塗りつぶさない場合、この指定は要りません。

2016-02-18T17:00:44+09:00