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

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

関連記事

HTML・CSS講座

【HTML5+CSS3】グラデーションありのプログレスバーを実装する方法

この前ちょこちょことCSSをいじりながら遊んでいたら、けっこういい感じのプログレスバーが作れたので公開しておきます。 CSS3を使ったプログレスバーの作り方 HTML 実際に作ってみると、それほど難しくありません。まずはdivタグでバーの外側を作り、spanタグ...

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

【悲報】Googleハネムーン終了で当ブログのアクセス数が急減。もしくはヨーヨー現象?

本気で記事を増やし始めた今年の4月頃から検索エンジンからの流入が増えアクセス数は好調に推移していたのですが、7月の終わり頃に一気に順位がストーンと落ちまして。ジェットコースターのごとくアクセス数が地をはっております。 地道に記事を増やしていたことが評価されて検索順位...

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

便利すぎ!Flickrのクリエイティブ・コモンズ画像を検索できる「flickr_cc」

あらゆるウェブサイトでスマホからのアクセスが大半になり、読み応えのある長文より画像やgif動画で構成された記事が読まれるようになってきました(というか、もう長文は何かしら目的がある人しか読まないですね)。ただ、全てオリジナルで用意するのはとんでもないコストがかかるので、ネット上か...

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

無料WordPressテーマ「Stinger」はそろそろ有料化した方が良いんじゃないか

SEOが施されているということで話題のWordpressテーマ「Stinger」。内部リンクの細やかさでは有料テーマの「賢威」に及ばないものの、アドセンスの配置、レスポンシブなど良くできているなぁと思います。 1つ思うことは、「そろそろこのテーマ有料化した方がいいん...

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

BuzzFeedみたいなバイラルメディアは日本のほうがうまく作れるんじゃないか疑惑

バイラルメディアという単語が生まれるきっかけとなったBuzzFeedをここのところ毎日のように眺めています。ゴシップにおちゃらけた記事、そしてその中にイラクの空爆についての記事が交じっていて、なるほどこれはバイラルされるなぁと感心しながら読んでいます。 日本で言えば...