新手求救：为什么不能居中显示啊！_html/css

新手求救：为什么不能居中显示啊！_html/css_WEB-ITnose

WBOY

发布： 2016-06-24 12:08:22

原创

1073 人浏览过

CSS代码如下：

body{ margin:0; padding:0; text-align:center;}
div#heard{ background:url(images/hd.gif) no-repeat; height:132px;}
div#pagebody{ background:url(images/content.gif) no-repeat; height:538px; padding:0 15px; }
div#footer{ background:url(images/ft.gif) no-repeat; height:100px; padding-top:30px;}

HMTL如下：

实例

打开后是左对齐，哪边出错了！

回复讨论(解决方案)

* {
margin: 0 auto;
}

<!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>        body        {            text-align: center;        }        div#main        {            margin-right: auto;            margin-left: auto;            width: 400px;            vertical-align: middle;            line-height: 200px;        }        div#heard        {            background: url(images/1.jpg) no-repeat;            height: 132px;        }        div#pagebody        {            background: url(images/1.jpg) no-repeat;            height: 538px;        }        div#footer        {            background: url(images/1.jpg) no-repeat;            height: 100px;        }    </style></head><body>    <div id='main'>        <div id="heard">        </div>        <div id="pagebody">        </div>        <div id="footer">        </div>    </div></body></html>

登录后复制

  body        {            text-align: center;        }

登录后复制