文字を中央表示にしたいのですが

質問

文字を中央表示にしたいのですが、真ん中より右側にずれてしまいます。
タグのどこが悪いのかわかりませんので、教えていただけませんでしょうか。

＜HTMLタグ＞---------------------------------
<table cellpadding="0" cellspacing="0" id="image"><tr><td valign="bottom">
<ul>
<li><a href="home.html">ホーム</a></li>
<li><a href="access.html">アクセス</a></li>
<li><a href="info.html">お問い合わせ</a></li>
</ul>
</td></tr></table>
--------------------------------------------------

＜cssタグ＞--------------------------------------
#image{
border:none;
background:url('img/bannar.bmp') no-repeat left top;
margin-left: auto;
margin-right: auto;
width:600px;
height:258px;
text-align: center;
}
#image td{
margin:auto;
}
#image ul{
list-style-type:none;
}
#image li{
width:150px;
margin:10px;
padding:0;
background-color:#fff;
font-size: 14px;
text-align:center;
text-decoration:underline;
}
----------------------------------------

回答No.4

font_color · ベストアンサー

CSSを修正してみました。
#image{
border:none;
background:url('bannar.bmp') no-repeat left top;
margin:0px auto;
width:600px;
height:258px;
text-align: center;
}
#image ul{
list-style-type:none;
margin:0;
padding:0;
}
#image li{
margin:10px;
font-size: 14px;
text-align:center;
text-decoration:underline;
}
これでどうでしょうか？

回答No.3

puti-tomat

今から書くソースに書き換えてください。
html
<div id="image">
<ul>
<li><a href="home.html">ホーム</a></li>
<li><a href="what.html">少林寺拳法とは</a></li>
<li><a href="entry.html">入部について</a></li>
<li><a href="schedule.html">練習日時及び場所</a></li>
<li><a href="access.html">アクセス</a></li>
<li><a href="info.html">お問い合わせ</a></li>
</ul>
</div>

CSS
#image ul, #image li {
margin: 0; padding: 0;
}
#image {
background: #FFF url('img/bannar.bmp') no-repeat left top;
margin: 0 auto;
width: 190px;
padding: 25px 205px;
}

#image ul{
width: 190px;
list-style-type:none;
line-height: 180%;
}

#image li{
font-size: 14px;
text-decoration:underline;
}

これで直ります。
先ほどのままだと右よりって言うか、fire foxで酷い事になっていましたので、それも含めてなおしておきました。

回答No.2

mezashi2000

リストタグのマークは消えていますが、字下げが生きています。

#image ul{
margin:0;
padding:0;
list-style-type:none;
}

のように<ul>に
　margin と padding
に「0」を指定してみてください。

回答No.1

puti-tomat

文字を中央表示だけで言われてもどの用に中央表示かにより若干やり方は変りますが、ただ文字を中央にしたいだけならば、

#image li{
width:150px;
}

を消すだけで大丈夫です。

補足

回答ありがとうございます。
上記の部分を消したのですが、若干右へずれてしまいます。

リンク先です
http://nagaishorinji.hp.infoseek.co.jp/