Question

这是一个常见的请求。但是，我想出去了。

    <style type="text/css">
        html, body { height: 100%; margin:0px; padding:0px; }
        #content { margin-left: 50%; margin-right: 50%; width:900px; }
    </style>

...

<body style="min-height:100%; height:100%; position:relative;">
  <header style="min-height:200px;">
      <div style="height:50px; background:url(http://www.mydomain.com/images/bg.gif) repeat-x;">&nbsp;</div>
      <div style="height:300px; background:url(http://www.mydomain.com/images/bg2.jpg) repeat;">
        <div class="content" style="height:300px; background:url(http://www.mydomain.com/images/masthead-back.jpg) no-repeat;">
          <img alt="Hello" src="http://www.mydomain.com/images/logo.png" />
          Welcome.
        </div>
      </div>

      <div id="nav">
        <ul class="navs">
          <li><a href="Main.aspx">Home</a></li>
      <li><a href="ContactUs.aspx">Contact</a></li>
      <li><a href="AboutUs.aspx">About Us</a></li>
        </ul>
      </div>
    </div>
  </header>

  <article class="content" style="padding-bottom:60px;">
    This is the main content
  </article>

  <footer style="position:absolute; bottom:0px; width:100%; height:60px; background-color:black;">
    <div class="content">
      <a href='#'>Privacy</a>&nbsp;|&nbsp;<a href='#'>Terms of use</a>
     </div>
  </footer>
</body>

我希望我的标题，artcle和页脚项目在体内居中。但是，我希望标题，文章和页脚中的内容左对齐。我做错了什么，目前一切都是左对齐的。但是，它不在屏幕中心。

Answer 1

您需要设置文章，页眉和页脚显示样式以阻止您的css以容纳旧版浏览器

为什么不使用＆lt; nav /＆gt;而不是＆lt; div id =“nav”＆gt;？

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {  display:block; }

 <nav>
        <ul class="navs">
          <li><a href="Main.aspx">Home</a></li>
      <li><a href="ContactUs.aspx">Contact</a></li>
      <li><a href="AboutUs.aspx">About Us</a></li>
        </ul>
      </nav>

Answer 2

尝试：

div.content //or nav or just plain div
{
margin-left: auto; //centers the DIVs
margin-right:auto;
text-align: left;
}

Answer 3

你需要一个带有这个CSS的包装器DIV：

#wrapper { width:800px; margin: 0 auto; }

Working DEMO

Answer 4

您需要添加正文

width:960px; margin: 0 auto;

在HTML中以DIV为中心内容

4 个答案: