※ ChatGPTを利用し、要約された質問です（原文：CSSで組んだメニューのセンターへの設置が出来ません）
CSSで組んだメニューのセンターへの設置が出来ません
このQ&Aのポイント
CSSを使い、横型でオーバーフローするメニューを作っています。
ベースとなるバー画像の上に各コンテンツへのリンクメニュー画像をバー画像の中心に置きたいのですが、うまく行きません。
丁度この教えて！gooのメニューバーと同じ様にしたいのです。
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;}
お礼
早急なご返答ありがとうございます！ 結果から申しますとセンターへ持ってくる事ができました。 ただし、お教え頂いたタグをコピペをしてもセンタリング出来なかったのでJSでメニュー画像を組み、 そのボックスを「text-align:center」で指定すると出来ました。 参考に上げて下さったリンク先も拝見しました。が、これもコピペだとうまくゆきませんでした。せっかくのJSを生かしきれてませんf^^; 適材適所があること、Webの進歩については承知しておりますがそれにすぐ対応できる能力をまだ持ち合わせてはいないので、 まず出来る事から始めたいと思っています。もちろん、ご指摘頂いた 事はしっかりとこれから勉強させていただきます！ この度はお付き合いくださり、ありがとうございました！