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

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

関連記事

ウェブサービス

サイバーエージェント運営の「Spotlight」、アプリの広告バナーに「1600万人以上が使ってる!」と誤解を招く絶妙なキャッチコピーを使い話題に

バイラルメディアという単語がバズワードとして消費されきって久しい今日このごろですが、バイラルの火を消してはいかんとばかりに盗用と著作権侵害に定評のあるサイバーエージェントの「Spotlight」がバイラルを仕掛けていることに今頃気づきました。 どういう意味?と二度見してしま...

ウェブメディア運営のコツ 1記事300円で書くくらいなら自分でサイトを作ってしまおう

ライターの皆さん、1記事300円で記事を書くくらいなら、自分でサイトを作ってしまいましょう

クラウドソーシングの案件を眺めているとよく見るのが「○○の記事を1記事300円で書いてくれる人募集!」みたいな案件。1記事だいたい400〜800文字、10〜20記事くらいで発注されているものが多いです。 この記事執筆系の案件、ちょっと書くだけでお金がもらえるというこ...

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

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

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

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

WordPressのデザインが面倒だったらThemeForestで買ってしまおう

「これからはWordpressでブログです!」と言われてさあ始めようと思い、レンタルサーバーを借り、ドメインを購入し、必死にやり方を調べてインストールして…というところまではなんとか達成できる方は多いのですが、次に出てくるのが「良いデザインのブログにしたい!」という欲求。...

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

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

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