CSS中浮动之后的导航栏居中
大家好，怎么让这个导航栏居中？有几种方法？？？在containner标签中用text-align：center怎么不起作用啊？望高手指点一下？？谢谢<styletype=...
大家好，怎么让这个导航栏居中？有几种方法？？？在containner标签中用text-align：center怎么不起作用啊？望高手指点一下？？谢谢
<style type="text/css">
<!--
body {margin:0px; padding:0px; text-align:center;}
#containner{margin: 0px auto; padding:0px;;position:relative; background-color:#F4FFFF; top:0px;left:0px;}
#banner2{margin-left:0px;padding:0px; font-size:18px; margin-top:0px;}
#banner2 li{margin:1px;padding:0px;text-align:center; float:left; display:block;text-decoration:none; border-bottom-style:outset;border-right-style:outset;}
#banner2 li a{color:#3399FF;text-decoration:none;display:block;text-align:center;margin-left:0px;padding:2px; background:#DDF4FF}
#banner2 li a:hover{background:#005279;color:#FF6600;}
-->
</style>
<div id="containner">
<div id="banner2" >
<li><a href="#">首页</a></li>
<li><a href="#">你好</a></li>
<li><a href="#">嘿嘿</a></li>
<li><a href="#">美女</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">自信</a></li>
</div> 展开
<style type="text/css">
<!--
body {margin:0px; padding:0px; text-align:center;}
#containner{margin: 0px auto; padding:0px;;position:relative; background-color:#F4FFFF; top:0px;left:0px;}
#banner2{margin-left:0px;padding:0px; font-size:18px; margin-top:0px;}
#banner2 li{margin:1px;padding:0px;text-align:center; float:left; display:block;text-decoration:none; border-bottom-style:outset;border-right-style:outset;}
#banner2 li a{color:#3399FF;text-decoration:none;display:block;text-align:center;margin-left:0px;padding:2px; background:#DDF4FF}
#banner2 li a:hover{background:#005279;color:#FF6600;}
-->
</style>
<div id="containner">
<div id="banner2" >
<li><a href="#">首页</a></li>
<li><a href="#">你好</a></li>
<li><a href="#">嘿嘿</a></li>
<li><a href="#">美女</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">自信</a></li>
</div> 展开
6个回答
展开全部
给你的容器#containner设置一个宽度，然后使用语句margin:0 auto;其实就可以了。但可能IE6不支持自动空白边。你的body里的text-align:center;原意是让文本居中，但IE将text-align:center;理解成让所有的东西都居中，包括div标签；这是原理，下面我在你代码的基础上修改如下（测试可用）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body *
{
margin:0px;
padding:0px;
text-align:center;
}
#containner
{
width:500px;
margin:0 auto;
position:relative;
background-color:#F4FFFF;
/*top:0px;*/
/*left:0px;*/
}
#banner2
{
width:100%;
height:100%;
float:left;
/*margin-left:0px;*/
/*margin-top:0px;*/
/*padding:0px; */
font-size:18px;
}
#banner2 li
{
width:15.64%;
height:100%;
margin:1px;
/*text-align:center; */
float:left;
display:block;
text-decoration:none;
border-bottom-style:outset;
border-right-style:outset;
}
#banner2 li a
{ height:100%;
color:#3399FF;
text-decoration:none;
display:block;
/*text-align:center;*/
/* margin-left:0px;*/
padding:2px;
background:#DDF4FF
}
#banner2 li a:hover
{
background:#005279;
color:#FF6600;
}
</style>
</head>
<body>
<div id="containner">
<ul id="banner2" >
<li><a href="#">首页</a></li>
<li><a href="#">你好</a></li>
<li><a href="#">嘿嘿</a></li>
<li><a href="#">美女</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">自信</a></li>
</ul>
</div>
</body>
</html>
有很多细节，如body后的*，通配选择符。为#containner增加了宽度设定，为ul标签设置了id"banner2"，取消了原来的div等，你自己比较下。我用FireFox和IE8测试了，效果都出来了。你可再用IE6试试 。还有其它居中的方法，如定位和负值空白边（负值外边距）等，这需要你对CSS更深的认识。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body *
{
margin:0px;
padding:0px;
text-align:center;
}
#containner
{
width:500px;
margin:0 auto;
position:relative;
background-color:#F4FFFF;
/*top:0px;*/
/*left:0px;*/
}
#banner2
{
width:100%;
height:100%;
float:left;
/*margin-left:0px;*/
/*margin-top:0px;*/
/*padding:0px; */
font-size:18px;
}
#banner2 li
{
width:15.64%;
height:100%;
margin:1px;
/*text-align:center; */
float:left;
display:block;
text-decoration:none;
border-bottom-style:outset;
border-right-style:outset;
}
#banner2 li a
{ height:100%;
color:#3399FF;
text-decoration:none;
display:block;
/*text-align:center;*/
/* margin-left:0px;*/
padding:2px;
background:#DDF4FF
}
#banner2 li a:hover
{
background:#005279;
color:#FF6600;
}
</style>
</head>
<body>
<div id="containner">
<ul id="banner2" >
<li><a href="#">首页</a></li>
<li><a href="#">你好</a></li>
<li><a href="#">嘿嘿</a></li>
<li><a href="#">美女</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">自信</a></li>
</ul>
</div>
</body>
</html>
有很多细节，如body后的*，通配选择符。为#containner增加了宽度设定，为ul标签设置了id"banner2"，取消了原来的div等，你自己比较下。我用FireFox和IE8测试了，效果都出来了。你可再用IE6试试 。还有其它居中的方法，如定位和负值空白边（负值外边距）等，这需要你对CSS更深的认识。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你用了text-align:center在Firefox中对DIV元素不起作用的可以写出text-align:-moz-center在FF中实现居中，但IE不支持，
所以要使居中写上
margin：0 auto；其实你代码中有了，问题就在你没给#containner加个width，
记住使用margin：0 auto;时一定带上个宽度才居中，
你body中的text-align:center对下面的文字居中有效，继承下来了
所以要使居中写上
margin：0 auto；其实你代码中有了，问题就在你没给#containner加个width，
记住使用margin：0 auto;时一定带上个宽度才居中，
你body中的text-align:center对下面的文字居中有效，继承下来了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
<!--
body {margin:0px; padding:0px; text-align:center;}
#containner{margin: 0px auto; padding:0px; background-color:#F4FFFF;}
#banner2{ font-size:18px; margin:auto;}
#banner2 ul{margin:auto; width:255px; height:35px;}
#banner2 li{margin:1px;padding:0px;text-align:center; float:left;text-decoration:none;}
#banner2 li a{color:#3399FF;text-decoration:none;display:block;text-align:center;margin-left:0px;padding:2px; background:#DDF4FF}
#banner2 li a:hover{background:#005279;color:#FF6600;}
-->
</style>
<div id="containner">
<div id="banner2" >
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">你好</a></li>
<li><a href="#">嘿嘿</a></li>
<li><a href="#">美女</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">自信</a></li>
</ul>
</div>
</div>
我用我的方法让它居中了！！
你看看，自己再想想！
<!--
body {margin:0px; padding:0px; text-align:center;}
#containner{margin: 0px auto; padding:0px; background-color:#F4FFFF;}
#banner2{ font-size:18px; margin:auto;}
#banner2 ul{margin:auto; width:255px; height:35px;}
#banner2 li{margin:1px;padding:0px;text-align:center; float:left;text-decoration:none;}
#banner2 li a{color:#3399FF;text-decoration:none;display:block;text-align:center;margin-left:0px;padding:2px; background:#DDF4FF}
#banner2 li a:hover{background:#005279;color:#FF6600;}
-->
</style>
<div id="containner">
<div id="banner2" >
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">你好</a></li>
<li><a href="#">嘿嘿</a></li>
<li><a href="#">美女</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">自信</a></li>
</ul>
</div>
</div>
我用我的方法让它居中了！！
你看看，自己再想想！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
text-align：center
这个是没有用的
用 margin:0 auto,居中
用其他的方式FF就不支持了.
这个是没有用的
用 margin:0 auto,居中
用其他的方式FF就不支持了.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不要用左浮动，吧<li>标签变成行内元素就行了，
li{display:inline;}
li{display:inline;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
