CSSで組んだメニューのセンターへの設置が出来ません

質問

初めてトピックを立てさせていただきます。宜しくお願いします。

CSSを使い、横型でオーバーフローするメニューを作っています。
ベースとなるバー画像の上に各コンテツへのリンクメニュー画像を
バー画像の中心に置きたいのですが、「中心に置く」これが
うまく行きません。丁度この教えて！gooのメニューバーと同じ様に
したいのです。各コンテツンツ画像の幅を一定にした場合の設置、
バー幅一杯にメニューを配置した場合の方法は検索するとヒット
するのですが、今回の様な場合の例となるサイトが無かったので
この場をお借りしました。
JSという手もあるとは思うのですが、今回はCSSでの設置を
したいと思っていますのでご協力お願いします。

動作環境
Mac OS 10.4.11
Safari 3.2.1
Firefox 2

■ボディー部■
<ul id="menu">
<li><a href="./about.html" class="m_01">01</a></li>
<li><a href="./about.html" class="m_02">02/a></li>
<li><a href="./about.html" class="m_03">03/a></li>
</ul>
■CSS部■
ul#menu{
background:url(img/m_off.gif) no-repeat;
list-style:none;
width:800px;
height:30px;
}
ul#menu li{
list-style:none;
float:left;
}
ul#menu a{
display:block;
height:30px;
text-indent:-100px;
overflow:hidden;
}
/**//*/ overflow:auto; /**/

/*------off*/
a.m_01 {
background:url(img/m_01.gif) no-repeat;
width:101px;}
a.m_02{
background:url(img/m_02.gif) no-repeat;
width:108px;}
a.m_03{
background:url(img/m_03.gif) no-repeat;
width:80px;}
/*------hover*/
a:hover.m_01{
background:url(img/m_01.gif) no-repeat 0px -30px;}
a:hover.m_02{
background:url(img/m_02.gif) no-repeat 0px -30px;}
a:hover.m_03{
background:url(img/m_03.gif) no-repeat -0px -30px;}

回答No.1

noname#83877 · ベストアンサー

もしかしたら把握できていないかもしれませんが、ようは1つ1つのメニューの幅を指定せずにpadding等で余白を調節できて、なおかつセンタリングできれば問題ないということでよろしいですか？

<ul id="menu"><!--
--><li><a href="./about.html" class="m_01">01</a></li><!--
--><li><a href="./about.html" class="m_02">02/a></li><!--
--><li><a href="./about.html" class="m_03">03/a></li><!--
--></ul>

#menu {
text-align:center;
background:url(image.jpg); /* ここにメニューボタン以外の枠(？)の画像 */
}
#menu li {
display:inline;
padding:10px;
}

現在はtext-indentを使った画像置換によるロールオーバーは既に多くの面でデメリットを抱え、時代遅れです。
基本は既にjavascript一択になっていると思いますが・・・
http://css-happylife.com/log/javascript/000157.shtml
このようなjavascriptを使い、img要素で記述される方が良いです。
どうしてもcssでされたいのであれば、display:list-item;による置換の方を使われることを推奨します。この方がまだいくらかマシです。

お礼

早急なご返答ありがとうございます！
結果から申しますとセンターへ持ってくる事ができました。

ただし、お教え頂いたタグをコピペをしてもセンタリング出来なかったのでJSでメニュー画像を組み、
そのボックスを「text-align:center」で指定すると出来ました。
参考に上げて下さったリンク先も拝見しました。が、これもコピペだとうまくゆきませんでした。せっかくのJSを生かしきれてませんf^^;
適材適所があること、Webの進歩については承知しておりますがそれにすぐ対応できる能力をまだ持ち合わせてはいないので、
まず出来る事から始めたいと思っています。もちろん、ご指摘頂いた
事はしっかりとこれから勉強させていただきます！
この度はお付き合いくださり、ありがとうございました！