text-align centerの違い

質問

div内にリンクを書くとセンターを基準に表示されるのですが
div内にulとliでメニューを組むとセンターを基準に表示されず
左を基準に表示されてしまうのですがどのようにすれば
いいものでしょうか？

---CSS---
#hoge {
width: 1000px;
text-align: center;
background: #fff;
}

---HTML---
↓この場合センター表示されます。
<div id="hoge">
<a href="#">hoge</a>
</div>

↓この場合センター表示されず左を基準に表示されます。
<div id="hoge">
<ul>
<li><a href="#">hoge</a></li>
</ul>
</div>

回答No.2

miya_00 · ベストアンサー

text-align centerとはインライン要素をセンタリングする方法です。
ブロックレベル要素をセンターにしたい場合はmargin-rightとmargin-leftにautoをかけるのが本来のやり方です。

なので対処としては
#hoge li {
float: left;
}
を
#hoge li {
display: inline;
}
にする。

float: left;じゃないと都合が悪い場合は
#hoge ul {
margin: 0 auto;
}
をつけたらこの問題は解決できます。

参考URL：

http://www.css-lecture.com/log/xhtml/002.html

回答No.3

kuzumiHK

2さんの説明に補足させていただきますと、
ulとliにwidthを設定する必要があります。

例えば、liが5つあり、ひとつあたり100pxの場合、
ulは（幅100px + 左右のmargin + 左右のpadding）×5で、550px。
つまり、#hoge ul に　width:550px;を追加し、
#hoge li に　width:100px;を追加すればいいということになります。

※#hogeのtext-align:centerは本来、不要ですが、
古いバージョンのIEで、text-align:centerがないと、
センタリングできないというバグがありますので残しておく必要もあるかもしれません。
その場合、中のテキストを左寄せにしたい場合に、
改めてtext-align:leftを設定しなおすという、
妙な？スタイルが必要となります。

回答No.1

steel_gray

ul、liであってもtext-alignでセンタリングはされます。

恐らくは、他のスタイルの定義が優先され思うとおりになっていないものと思われます。
スタイル全体を見直してみてください。

また、
text-align: center !important;/* !importantルール：優先度を上げる*/
と、する事で解決するかもしれませんが、やっぱり根本の原因を探して修正しないと後々苦労するかもしれません。

補足

お返事ありがとうございます。
調べてところ

#hoge {
width: 1000px;
text-align: center;
background: #fff;
}

#hoge li {
float: left;/*ここが原因*/
margin-right: 5px;
padding-left: 5px;
line-height: 2em;
text-align: center;
}

しかしこれをとってしまうと横並びにならないのですが
どのような方法があるでしょうか？
希望としては横並びのメニュー表示をしたいと思っております。