CSSでロールオーバーメニューボタンを作った際の真ん中配置方法について

質問

CSSのメニューボタンの真ん中配置方法について質問です。

HTMLは
<ul class="list">
<li><a href="#sample">リスト１</a></li>
<li><a href="#sample">リスト２</a></li>
<li><a href="#sample">リスト３</a></li>
<li><a href="#sample">リスト４</a></li>
<li><a href="#sample">リスト５</a></li>
</ul>

CSSは
.list{
padding:0;
margin:0;
width:100%;
list-style-type:none;

}
.list li{
float:left;
padding:0;
margin:0 auto 0 auto;
list-style-type:none;
background:none;
background-color:#eeeeff;
}
.list li a{
display:block;
padding:0.2em 0 0;
width:80px;
color:#0000ff;
font-size:12px;
text-align:center;
}
.list li a:link,
.list li a:visited{
text-decoration:none;
border-bottom:5px solid #eeeeff;
}
.list li a:hover,
.list li a:active{
text-decoration:none;
border-bottom:5px solid #003399;
}
っと設定しております。

この方法だと画面の左寄りにメニューボタンが
表示されてしまい、小生の制作しているwebサイトが
真ん中配置の表示の為に格好が悪くなります。

そこで、このロールオーバーメニューボタンを
真ん中配置にしたいのですが、どうしたら
よいでしょうか。

ulにwidth指定して、任意の数字と単位をいれて、
marginで左右のautoをとりましたが、真ん中に
表示されませんでした。

positionは行っておりません。

是非よろしくお願い致します。

過去ログにはコンテンツ自体を真ん中に表示する方法の
質問はありましたが、上記のような質問が
ないようなので、新しく質問いたしました。

どうぞ、よろしくお願い致します。

補足
小生のwebサイトは全体巾を760pxにしていして
その中でカラムを組んでおります。
メニューボタンは巾760px内で横一列にして、
真ん中配置(左右に隙間が開くなら、その隙間が
左右で等間隔になるようにしたいと考えております。)
にしたいです。

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

回答No.1

leap_day · ベストアンサー

こんにちは

＞ulにwidth指定して、任意の数字と単位をいれて、
＞marginで左右のautoをとりましたが、真ん中に
＞表示されませんでした。

widthはいくつに設定しました？
<ul>widthは80px*5で400pxとなります

.list{
padding:0;
margin:auto;
width:400px;
list-style-type:none;
}

お礼

ご回答有難うございます。

widthは適当に500pxにしていました。
400pxより大きければいいかなっと
安易に考えて…。

試してみます！

補足

.list{
padding:0;
margin:auto;
width:400px;
list-style-type:none;
}
頂いたタグで試したのですが…。
ダメでした。

書き忘れていたのですが、
ドリームウィーバー8を使用して
おります。

そのドリームウィーバー8内では
上手くいくのですが、
オペラ(一番新しいの)で開くと
左によってしまいます。

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

回答No.3

goldfox

body{text-align:center;}
.list{
padding:0;
margin:auto;
list-style-type:none;
width:410px;
}

互換モードならこれでいけると思いますが、どうでしょう？

お礼

ご回答有難うございます。

大変参考になります。

解決致しました。
どうかまたよろしく
お願いいたします。

回答No.2

leap_day

こんにちは

変ですね～～Opera9.21で試してみましたけどセンタリングされました・・・

他の要素が邪魔しているのでは？

＞webサイトは全体巾を760pxにしていして
これはdivでの幅指定？それともbodyでの幅指定です？
これをセンタリングしていないと左端から760pxでボタンのセンタリングがされます

body {
width:760px;
margin:auto;
}

お礼

ご回答有難うございます。

大変申し訳ありません。

全体の幅の760pxが記載されて
おらず、間抜けな間違いを
していました…。

大変申し訳ありません。

おかげで解決致しました。
有難うございました。