スタイルシートの横並びリスト中央配置について

質問

#Area_Navi {
margin: 0;
padding: 0;
}

#Area_Navi ul {
margin-left: auto;
margin-right: auto;
text-align: center;
list-style-type: none;
list-style-position:inside;
}

#Area_Navi li {
text-align: center;
display: inline;
padding: 0;
margin-left: auto;
margin-right: auto;
float: left;
width: 200px;
}

#Area_Navi a {
display: block;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #FFFFFF;
font-size: 20pt;
padding: 3px;
text-decoration: none;
color: #000000;
margin: 1px 0px;
text-align: center;
}

スタイルシートは上記なのですが、うまく中央配置されず
半端に左寄せになっています。

windows7
firefox

を使用しています。

調べて
position:relative;
と記載しても上手く中央寄せになりませんでした。

どなたか、教えて頂けませんか。
宜しくお願い致します。

回答No.1

ORUKA1951 · ベストアンサー

float:leftは、文字通り左へ寄せているのですが？？
それでいて、中央に寄せたいとは矛盾している。
#Area_Navi li {
text-align: center;
display: inline;　↑矛盾しているinlineにcenterはないでしょう。
padding: 0;
margin-left: auto;
margin-right: auto;
float: left;↑display:inlineと矛盾しているfloatを指定するとblockになる。
width: 200px;
}
とか、基本的な部分で・・

#Area_Navi{text-align:center;font-size:20pt;}
#Area_Navi ul,#Area_Navi ul li{list-style:none;margin:0;padding:0;}
#Area_Navi ul li{display:inline;padding:5px 10px;}
#Area_Navi ul li a{
border: 1px solid #000000;
background-color: white;
padding: 10px;
text-decoration: none;
color: black;
margin: 1px 0px;
}

これだけでよい。なぜ一方の枠が閉じられてないのか不明

お礼

ありがとうございます。

CSSは初心者でして、全く分からずつまっていました。

分かりやすい説明ありがとうございました。