>  기사  >  웹 프론트엔드  >  新手求救:为什么不能居中显示啊!_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 12:08:221070검색

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;        }

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.