HOME > ウェブデザイン > 【CSS】横並びにしたリスト形式のメニューを全体の中央に配置する
公開日:2009.12.18
この記事は約1分で読めます。

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

この記事は最終更新日から9年以上経過しているため現状にそぐわない可能性もあります。

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

その解決策です。

SIRIUSレビューイメージ画像

実装

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

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

しかし<li>にfloat:left;をかけるとどうやっても自動で中央には寄せられません。

下図のようになってしまうんです。

(もしかしたら何か方策があるのかもしれませんがいまの私の知識にはアリマセンです)

解決策は至って簡単でした。

<ul>にtext-align: center;を、<li>にはdisplay: inline;を指定するだけです。

demo

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

以上です。

スポンサーリンク

スポンサーリンク

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

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

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