loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [ウェブデザイン] > 【CSS】横並びにしたリスト形式のメニューを全体の中央に配置する
この記事は約1分で読めます。
この記事は最終更新日から5年以上経過しているため現状にそぐわない可能性もあります。

【CSS】横並びにしたリスト形式のメニューを全体の中央に配置する

投稿日:2009.12.18

”footer”にリスト形式でテキストメニューを横に並ばせようと思ったとき、
float指定をかけてしまうと全体を中央に揃えようと思ってもなぜか簡単にはいきません。

その解決策です。

↓↓↓簡単にサイトが作れる次世代ツール↓↓↓

SIRIUSレビューイメージ画像

実装

慣れないうちはマージンや余白で無理矢理中央寄せっぽくしていたんですが
知ってしまえば簡単な設定でした。

たとえば下記のリストを横並びにしようとした時、私の中では ”float” ぐらいしか頭に浮かばないんです。

しかし <li> に float:left; をかけるとどうやっても自動で中央には寄せられません。
下図のようになってしまうんです。
(もしかしたら何か方策があるのかもしれませんがいまの私の知識にはアリマセンです)

解決策は至って簡単でした。
<ul> に text-align: center; を、<li> には display: inline; を指定するだけです。

demo

多少の余白を付けたサンプルです。

以上です。

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「SWEETY (TCD029)」 

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

先頭へ