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タグ内の項目を中央寄せ(センタリング)する方法

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

関連記事

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

Yahoo!からの検索流入を狙ってNAVERまとめを作る方法

賛否両論はあれど、PVを稼げば広告がクリックされなくても、アフィリエイトリンクを踏んで何かを買ってもらわなくてもお金がもらえるということで人気のNAVERまとめ。検索上位に表示されやすいというメリットもあり、SEO業者も含め、利用者は増え続けています。 意外と知られ...

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

【2014年8月版】商用利用可能な無料のレスポンシブウェブデザインテンプレートを配布しているサイト3選

私は副業のため毎月1、2サイト立ち上げているのですが、サイトのデザインをどうするかでいつも悩んでいます。毎回同じテンプレートを使うのは芸がないし、かといって外部委託するには予算が足りない。万が一委託する余裕があったとしてもハズレた時には即閉鎖するので、もったいないことこの上ないの...

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

iOS7のSafariが持つ誤タップ防止機能が、オーバーレイ広告を殺す?

スマホでサイトを見ている時に下に出てくるオーバーレイ広告。スクロールしている間にうっかりタップしてしまう位置にあり、クリック率が自然と高くなることからあちこちのサイトで導入されています(このブログでは私が大嫌いなので導入していません)。 しかし、iPhoneユーザー...

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

Yahoo!、リスティング広告経由のマルウェア感染問題を受け、広告枠の背景色を青色に変更

ここ数日、Yahoo!で「Google Chrome」をはじめとした有名なソフトウェアで検索をするとマルウェアに観戦するサイトが広告に表示されると話題になっていたのですが ヤフーの広告でスパムが表示される!と話題なので「Google Chrome」と検索してみたら面白い事に...