読者です 読者をやめる 読者になる 読者になる

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

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

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は切り捨てていっても良いかと思います。
実際、大手サイトでも切り捨てているところはあります(GoogleFacebookなど)