如何张导航栏像标题一样在页面中居中，我以用了<div align="center">。。。</div>还是不行
3个回答
展开全部
给你的容器#containner设置一个宽度，然后使用语句margin:0 auto;其实就可以了。但可能IE6不支持自动空白边。你的body里的text-align:center;原意是让文本居中，但IE将text-align:center;理解成让所有的东西都居中，包括div标签；这是原理，下面我在你代码的基础上修改如下（测试可用）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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" "">
<html xmlns="">
<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更深的认识。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
首先要定义div的宽度，然后用样式margin:0 auto;的属性就可以控制div让其居中。希望能帮到你。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
设置CSS样式position为absolute,用绝对定位试试
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
