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

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

関連記事

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

【WordPress】関連記事を手動入力するようになったら平均PV数が上昇した

4月くらいからこのブログの「合わせて読みたい」を手動入力に変更しまして、そこからブログがSEO的にもUI的にもかなりいい方向に進化しています。 今までこのブログの関連記事はzenbackやプラグインを使うなど色々と実験してきたのですが、なかなか合わせて読んでほしい記...

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

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

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

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

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

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

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

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

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

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

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

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