ナビゲーションを横並びにして真ん中配置にしたい

質問

ナビゲーションをulタグを使って作り、横並びにしています。
さらにそれをブラウザの真ん中に配置したいのですが、真ん中になってくれません。

HTMLは以下のようにしています。
<div id="menu_top">
<ul>
<li>Profile</li>
<li>Information</li>
<li>History</li>
<li>Invitation</li>
</ul>
</div>

CSSは以下のとおりです。
#menu_top{
　margin:auto;
　width:90%;
　height:20px;
　text-align: center;
}

#menu_top li{
　float:left;
　list-style-type:none;
　margin:15px;
}

あとbody要素にはtext-align:centerを入れています。

現状では、ナビゲーション自体は横並びになるものの、左に寄っています。横並びのまま、真ん中に表示させるにはどのようにしたらいいでしょうか。

よろしくお願いいたします。

回答No.2

readordie · ベストアンサー

テキストのナビゲーションなのでfloatを使わないでシンプルに

#menu_top li{
list-style-type:none;
display:inline;
margin:15px;
}

でどうでしょうか。

お礼

できました！
display:inline;っていうのを今まで理解していませんでした。
助かりました。ありがとうございました！！

回答No.3

ran_2323

#menu_topまたはその中のulにwidthを指定してあげるといいのではと思います。
li要素の幅を計算し、ulの幅を割り出す。
それからmargin:auto;をかければ、中央に寄ると思います。
li要素のfloat:leftは左詰めに回り込みli要素の親要素の幅を決めなければ左へ左へと寄っていきます。float:rightなら右よりになります。
なので、回り込みの幅を決め、それからfloatさせれば中央寄せにできるかと思います。
その場合、幅の単位をそろえること。
%で指定するなら、全てのwidthを%で指定してやらないと、ウィンドウ幅を広げたときにレイアウトが崩れてしまいます。
または、親ボックスのみpxかem指定し、子ボックスは%を使う、とかですね。

お礼

ulにwidthを指定してやったらできましました！
No2の方にも、シンプルな方法を教えていただいたので今回はそちらを使わせていただくことにしましたが、
理論的に理解できてとても参考になりました。
本当にありがとうござい巻いた！

回答No.1

miya_00

#menu_top ul {
margin: 0 auto;
}

を入れてみたらセンターにきませんか？

今書いてある情報から考えるとそれしか考えられないような気がします。

もし駄目だった場合はもう少し詳しい情報をお願いします。

お礼

ありがとうございます。
やってみたのですがダメでした・・・。
なにか情報が足りなかったかもしれませんね。すみません。
No2の方の方法でできました。
ご回答本当にありがとうございました！