0

这是一个常见的要求。但是，我要疯了。

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

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

4

4 回答 4

0

您需要设置文章、页眉和页脚显示样式以阻止您的 CSS 以适应旧浏览器

还有为什么不使用 <nav/> 而不是 <div id="nav">？

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>
于 2012-12-07T17:34:27.930 回答
0

尝试：

div.content //or nav or just plain div
{
margin-left: auto; //centers the DIVs
margin-right:auto;
text-align: left;
}
于 2012-12-07T17:35:03.647 回答
0

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

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

工作演示

于 2012-12-07T17:37:18.700 回答
0

您需要在正文中添加

width:960px; margin: 0 auto;
于 2012-12-07T17:39:44.800 回答