ホームページにメニューバーを設置したいと思ったのですが、メニューバーを真ん中に設置する表記の仕方がわかりません。できるならCSSの表記の仕方を教えて欲しいです。下に今のCSSを載せておきます。
#globalnavi{
margin-left:auto;
margin-right:auto;
padding: 0;
width:1190px;
height:15px;
font-size:20px;
*font-size:20px;
background:black; repeat-x scroll 0 0;
font-family : Arial,'MS Pゴシック',sans-serif ;
}
#globalnavi ul{
margin-left:auto;
margin-right:auto;
list-style-type: none;
margin: 0px 0px 0px 0px;
}
#globalnavi li{
float: left;
margin: 0;
padding: 0;
}
#globalnavi a{
text-align: center;
display:block;
padding: 3px 10px 3px 10px;
color: white;
font-weight: bold;
text-decoration: none;
border-right:1px solid #808080;
margin:1px 0px 0px 0px;
}
#globalnavi a:hover{
background-color:#808080;
color: white;
font-weight: bold;
text-decoration: none;
border-right:1px solid #808080;
}
コメントにもありますが、
「 #globalnavi 」のセレクタ内に「text-align:center;」を入れてはどうでしょう?
可能ならば、その直前などの「 #globalnavi 」を包んでいるdiv要素など
IEのブラウザでは、これが入らないと中央寄せができません。
「 #globalnavi 」の部分が「width:1190px;」にもなっているので、
どんなデザインなのかが疑問ですが・・・
コメント(2件)
左右のマージンへの「auto」では中央寄せにならないブラウザもありますので、「text-align:center;」も指定する必要があります。
http://www.res-system.com/weblog/item/567
http://www.nishishi.com/css/box-centering.html
http://www.dspt.net/stylesheet_css/001/ie_error2.html
※上記2つのページの例では、中央寄せ下要素「div.test」あるいは「p」の中のテキストを左寄せにしたい為、「text-align:left;」を指定していますが、中央寄せしたdivあるいはpの中のテキスト表示が中央寄せでいい場合は必要ありません。
上記で解決しない場合は、HTMLコードの方も提示した方がいいと思います。(※確認ブラウザとバージョンも。)