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準拠でソースコードを書く必要はあるのか?」について。結論か...

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

新しいデザインになったツイートボタンをVertical(バルーン付き)でバランスを崩さず横並びに表示させる方法

3連休初日に実装とかやめてくださいよ… 本日11月21日より、ツイートボタンが新しいデザインに変更になりました。そして、それに伴いツイート数取得機能が終了。ついでにバルーン(カウント数が表示されていた吹き出し部分のこと)も消えました。 ツイート数が表示されないことは別...

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

20個以上のメディア運営に関わって気づいた、結果が出るオウンドメディアを作るための5ステップ

私はこのブログを始めてから20個以上のオウンドメディア立ち上げ→軌道に乗せるまでのコンサルを行ってきました。うまくいったものもあれば撤退してしまったものもありますが、9割近くが「成功」と呼べる成果をあげています。 結果を出すと紹介、問い合わせも増え、最近は「うちもオ...

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

女子高生社長の椎木里佳さん、iOSアプリ「ミルピク(milkpic)」公式サイトのソースコードパクリ騒動で教科書に載るレベルの鮮やかな鎮火を見せる

Twitterのライムラインを眺めていたら、女子高生社長の椎木里佳さんが経営する会社がリリースした「ミルピク(milkpic)」というアプリの公式サイトが、こちらも同じくアプリの「Presso」の公式サイトのCSSをまるごとパクっている!という騒ぎを見かけました。 最近書籍...