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

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

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

その解決策です。

実装

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

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


<div id="footer">
<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>
</ul>
</div>

<ul>

</ul>

</div>

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

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

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

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

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


#footer {
	width: 500px;
	border: 1px solid #666;
}
#footer ul {
	list-style-type: none;
	text-align: center;
	margin-left: 0;
	padding-left: 0;
}
#footer li  {
	display: inline;
}