css中的简单布局问题:(求高手帮下忙)为什么body中的margin:0 auto;没有显示居中而是靠左呢?
这个是index.html<html><head><title>瓢城杂货店</title><linkrel="stylesheet"type="text/css"href...
这个是index.html
<html>
<head>
<title>瓢城杂货店</title>
<link rel="stylesheet" type="text/css" href="style/main.css" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<div id="header">header</div>
<div id="strip">strip</div>
<div id="adver">adver</div>
<div id="sidebar">sidebar</div>
<div id="bill">bill</div>
<div id="affiche">affiche</div>
<div id="help">help</div>
<div id="guide">guide</div>
<div id="special">special</div>
<div id="newpro">newpro</div>
<div id="channel">channel</div>
<div id="sortnav">sortnav</div>
<div id="sort">sort</div>
<div id="foter">foter</div>
</body>
</html>
这个是main.css:
/* CSS Document */
*{
padding:0;
margin:0;
}
body{
width:900px;
margin:0 auto;
background: #0066FF url(../png/背景.png) repeat-y 0 -67px;
}
#header{
width:900px;
height:96px;
background:red;
}
#strip
{
width:900px;
height:67px;
background:green;
}
#adver
{
width:900px;
height:50px;
background:yellow;
}
#sidebar
{
width:200px;
height:1263px;
background:gray;
float:left;
}
#bill
{
width:346px;
height:178px;
background:orange;
float:left;
margin:0 5px 0 0;
}
#affiche
{
width:270px;
height:178px;
background:blue;
float:left;
margin:0 5px 0 0;
}
#help
{
width:72px;
height:178px;
background:black;
float:left;
}
#guide
{
width:346px;
height:212px;
background:#660000;
float:left;
margin:0 5px 0 0;
}
#special
{
width:346px;
height:212px;
background:red;
float:left;
}
#newpro
{
width:696px;
height:157px;
background:#3366FF;
float:left;
margin:0 0 3px 0;
}
#channel
{
width:696px;
height:222px;
background:#FF00FF;
float:left;
margin:0 0 3px 0;
}
#sortnav
{
width:696px;
height:29px;
background:#000000;
float:left;
margin:0 0 3px 0;
}
#sort
{
width:696px;
height:455px;
background:#0000FF;
float:left;
margin:0 0 3px 0;
}
#foter
{
width:900px;
height:164px;
background:#CCFF00;
float:left;
} 展开
<html>
<head>
<title>瓢城杂货店</title>
<link rel="stylesheet" type="text/css" href="style/main.css" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<div id="header">header</div>
<div id="strip">strip</div>
<div id="adver">adver</div>
<div id="sidebar">sidebar</div>
<div id="bill">bill</div>
<div id="affiche">affiche</div>
<div id="help">help</div>
<div id="guide">guide</div>
<div id="special">special</div>
<div id="newpro">newpro</div>
<div id="channel">channel</div>
<div id="sortnav">sortnav</div>
<div id="sort">sort</div>
<div id="foter">foter</div>
</body>
</html>
这个是main.css:
/* CSS Document */
*{
padding:0;
margin:0;
}
body{
width:900px;
margin:0 auto;
background: #0066FF url(../png/背景.png) repeat-y 0 -67px;
}
#header{
width:900px;
height:96px;
background:red;
}
#strip
{
width:900px;
height:67px;
background:green;
}
#adver
{
width:900px;
height:50px;
background:yellow;
}
#sidebar
{
width:200px;
height:1263px;
background:gray;
float:left;
}
#bill
{
width:346px;
height:178px;
background:orange;
float:left;
margin:0 5px 0 0;
}
#affiche
{
width:270px;
height:178px;
background:blue;
float:left;
margin:0 5px 0 0;
}
#help
{
width:72px;
height:178px;
background:black;
float:left;
}
#guide
{
width:346px;
height:212px;
background:#660000;
float:left;
margin:0 5px 0 0;
}
#special
{
width:346px;
height:212px;
background:red;
float:left;
}
#newpro
{
width:696px;
height:157px;
background:#3366FF;
float:left;
margin:0 0 3px 0;
}
#channel
{
width:696px;
height:222px;
background:#FF00FF;
float:left;
margin:0 0 3px 0;
}
#sortnav
{
width:696px;
height:29px;
background:#000000;
float:left;
margin:0 0 3px 0;
}
#sort
{
width:696px;
height:455px;
background:#0000FF;
float:left;
margin:0 0 3px 0;
}
#foter
{
width:900px;
height:164px;
background:#CCFF00;
float:left;
} 展开
2个回答
展开全部
<body>
<div class="box">
<!-- 这里是你页面的代码 -->
</div>
</body>
.box{
width:900px;
margin:0 auto;
background: #0066FF url(../png/背景.png) repeat-y 0 -67px;
}
把最上面的<html>替换成
<!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">这个，如果不加这个的话，margin:0 atuo;是不会实现居中的
<div class="box">
<!-- 这里是你页面的代码 -->
</div>
</body>
.box{
width:900px;
margin:0 auto;
background: #0066FF url(../png/背景.png) repeat-y 0 -67px;
}
把最上面的<html>替换成
<!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">这个，如果不加这个的话，margin:0 atuo;是不会实现居中的
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
Margin－left：auto；
margin－right：auto；把你原来的删了加上这个你再调试
margin－right：auto；把你原来的删了加上这个你再调试
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
