floatで並べたliタグ内の項目を中央寄せ(センタリング)する方法

中央寄せ

フッターのメニューやページャなど、リンクを並べている箇所は通常liタグでコーディングすると思います。pタグとかで適当に並べてもいいのですが、SEOの関係で今はほぼ全てのサイトでliタグが採用されているはずです。

ただ、困るのがメニューを中央寄せにしたい時。単純にfloatで左寄せにするだけだと左に張りつき、テキストを中央寄せにしてみても状況は変わりません。display:table;とかinline-blockとかを使ってもいいのですが、それだとIEがダメで振り出し…というオチが待っています。

実はliタグを中央寄せにするにはちょっとしたテクニックが必要です。以下にソースコードを記載しておきますので、参考にしてみてください。

目次

HTML

<div id="menu">
	<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>
		<li><a href="#">リンク5</a></li>
	</ul>
</div>

CSS

#menu{
	position:relative;
	overflow:hidden;
}
#menu ul{
	position:relative;
	left:50%;
	float:left;
}
#menu li{
	position:relative;
	left:-50%;
	float:left;
}

デモ

上記ソースコードをそのまま表示したデモページを作りました。

【デモ】floatで並べたliタグ内の項目を中央寄せ(センタリング)する方法

※リンク色やフォントの大きさ、区切り線の有無等は各自で変更してください。

関連記事

SEO 【SEO講座】第1回 W3C準拠でソースコードを書く必要はあるの?

【SEO講座】第1回 W3C準拠でソースコードを書く必要はあるの?

いまさらなことほど新鮮に見えるということなので、これから地味にSEO講座を書いていこうと思います。このブログを読んでいる方の中には、少なからずウェブで副業を目論んでいる人がいると思いますので。 今回のテーマは「W3C準拠でソースコードを書く必要はあるのか?」について。結論か...

ウェブメディア運営のコツ

【2013年版】Google Analyticsで新しいアカウントを追加する方法

アクセス解析といえば、と聞かれるとまず間違いなく最初に名前が挙がる「Google Analytics」。機能も随時追加されており、無料のアクセス解析の中では間違いなくナンバーワンの性能を誇ります。 しかし、使っていて結構忘れがちになってしまうのが新規サイトの追加方法。サイト...

ウェブメディア運営のコツ

WordPress 3.8日本語版の配信開始。かつてない大幅なデザインのアップデートで最初は戸惑うかも

Wordpress3.8日本語版の配布がスタートしました(リリースノートはこちら)。 今回の目玉は「現代的な新デザインの導入」ということで、アップデートするとわかるのですが管理画面のデザインが一気に変わってびびります。サイドバーがフラットデザインっぽくなり、レスポン...

ウェブメディア運営のコツ

「あとから読む」の定番Pocketボタンを設置しました!

本日より、このブログにPocketボタンを設置しました!気になっているけど時間がなくて読めない記事、参考にするために保存しておきたい記事などなど、後から読みたい記事はどんどん保存しちゃってください! Pocketってなに? Pocketは、以前「ReadItLater...

Google活用術

Google Adsenseの新広告ユニット「モバイル アンカー広告」はメディア運営者もユーザーも得をする

まだまだ発展途上のモバイル広告。大きさはどれくらいが良いか、どこに掲載すればタップ率が上がるか…日々試行錯誤が繰り返されています。 今のところ掲載側の立場で最も支持されているのが追尾型の広告。そうです、あの一番下に常に出てくるうざったい広告のことです。誤タップによって収益が...