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

先日の記事にて、liをfloatで横並べたものをセンタリングさせる方法として
「position｣や「left」を使ってul全体をセンタリングするという手法を
紹介させて頂いたのですが、読者より、ul全体をdisplay:tableを使って、
センタリングする方法があることを知りました。

display:tableは、ある要素をテーブルのように表現することができる
CSSプロパティです。
親の要素に display:table を指定することでテーブルと同じような構造で
指定することができます。以下が実装例です。
サンプルはこちら。

HTML

<div class="page">
	<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>
	</ul>
</div>

CSS

div.page {
	background-color: #999999;
	overflow: hidden;
	width:500px;
	position: relative;
}
ul {
    display: table;
    margin: 0 auto;
}
ul > li {
    float: left;
    list-style: none;
    margin-right: 1em;
}

ただ、上記のCSSプロパティIE8以降のみなので、IE7も同じようにセンタリング
させたい場合は「position｣や「left」を使えばよいかと思います。

しかし、Net Applicationsより発表された(2013年10月)デスクトップの
ブラウザシェアによると、IE7のシェアが約1%に落ちていっており、しかもIE6よりも
低いということが分かります。

http://news.mynavi.jp/news/2013/10/03/379/index.html

ってことで、IE7は切り捨てていっても良いかと思います。
実際、大手サイトでも切り捨てているところはあります（GoogleやFacebookなど）