サイドナビの配置が上手くいきません。

質問

初心者なので指導宜しくおねがいします。

サイドナビエリアの中でタイトル画像、ボタン画像をセンターにしたいのですがfirefox、IEで確認すると別々の配置になります何か良い解決策を教えて下さい。
私が書いたタグ、cssで変だなと言う点がありましたら指摘宜しくお願いします。

<!--サイドナビエリア-->
<div id="sidenavi">
<ul>
<li id="sidetop">back namber</li>
　　　<li><a href="work2010.html" title="2010" id="w10">2010</a></li>
<li><a href="work2009.html" title="2009" id="w09">2009</a></li>
<li><a href="work2008.html" title="2008" id="w08">2008</a></li>
<li><a href="work2007.html" title="2007" id="w07">2007</a></li>
</ul>
</div>
<!--ここまでサイドナビエリア-->
/*----------------------------------------------
サイドナビエリア
----------------------------------------------*/

#sidenavi {
float:left;
height:auto;
width: 300px;
margin: 30px auto 0;

}
#sidenavi ul{
height: 30px;
width: 60px;
list-style: none;
padding: 0 ;
margin: 0 ;
}
#sidenavi ul li {
text-align:center;

}
#sidenavi ul li a {
background: #FFFFFF;
text-indent: -9999px;
display: block;
height: 30px;
width:60px;
overflow: hidden;
}

#sidenavi #sidetop{
height: 30px;
width: 150px;
text-indent: -9999px;
margin: 0 auto 0;
background:url(../images_banner/sidemenu/back_namber.jpg) no-repeat;
}

#sidenavi #w10 {
width:60px;
background:url(../images_banner/sidemenu/2010.jpg) no-repeat;
}
#sidenavi #w10:hover {
width:60px;
background:url(../images_banner/sidemenu/2010over.jpg) no-repeat;
}
#sidenavi #w09 {
width:60px;
background:url(../images_banner/sidemenu/2009.jpg) no-repeat;
}
#sidenavi #w09:hover {
width:60px;
background:url(../images_banner/sidemenu/2009over.jpg) no-repeat;
}
#sidenavi #w08 {
width:60px;
background:url(../images_banner/sidemenu/2008.jpg) no-repeat;
}
#sidenavi #w08:hover {
width:60px;
background:url(../images_banner/sidemenu/2008over.jpg) no-repeat;
}
#sidenavi #w07 {
width:60px;
background:url(../images_banner/sidemenu/2007.jpg) no-repeat;
}
#sidenavi #w07:hover {
width:60px;
background:url(../images_banner/sidemenu/2007over.jpg) no-repeat;
}

回答No.2

sr-ki · ベストアンサー

何度もすみません。先程の回答の中で一番下の行のコメントの書き方を間違っていました。
正しくはこうです。

#sidenavi ul{
/*
height: 30px; ul要素の高さ30px？
width: 60px; ul要素の幅60px？
*/
list-style: none;
padding: 0 ;
margin: 0 ;
}
#sidenavi ul li a {
background: #FFFFFF;
text-indent: -9999px;
display: block;
height: 30px;
width:60px;
overflow: hidden;
margin: 0 auto; /*追加*/
}

回答No.1

sr-ki

ざっと見ておかしいかな？という部分は以下のとおりです。
これで多分a要素はセンター配置になると思います（確認はしてないですごめんなさい）

#sidenavi ul{
/*
height: 30px; ul要素の高さ30px？
width: 60px; ul要素の幅60px？
*/
list-style: none;
padding: 0 ;
margin: 0 ;
}
#sidenavi ul li a {
background: #FFFFFF;
text-indent: -9999px;
display: block;
height: 30px;
width:60px;
overflow: hidden;
margin: 0 auto; //追加
}