Question

这应该不难...我有一个菜单和一些内容包裹在一个居中的液体div。内容定位于绝对位置。我想做的就是中心#content-container。我在这里缺少什么？

    #wrapper {
        max-width:100%;
        min-width:600px;
        min-height:100%;
        margin:0 auto;
    }

    #header {
     -moz-background-clip:border;
     -moz-background-origin:padding;
     -moz-background-size:auto auto;
     background-attachment:scroll;
     background-color:transparent;
     background-image:url(images/KMIAFS_banner.jpg);
     background-position:center top;
     background-repeat:no-repeat;
     height:150px;
    }

    #menu {
     margin-top:150px;
     clear:left;
     float:left;
     padding:0;
     border-top:6px solid #336699;
     width:100%;
     overflow:hidden;
    }

    #menu ul {
     float:left;
     margin:0;
     padding:0;
     list-style:none;
     position:relative;
     left:50%;
     text-align:center;
    }

    #menu ul li {
     display:block;
     float:left;
     list-style:none;
     margin:0;
     padding:0;
     position:relative;
     right:50%;
    }

    #menu ul li a {
     display:block;
     float:left;
     margin:0 1px 0 0;
     padding:30px 10px 6px 10px;
     background:#336699;
     text-decoration:none;
     color:#fff;
    }

    #menu ul li a:hover {
     padding:35px 10px 6px 10px;
    }

    #menu ul li.active a, #menu ul li.active a:hover {
     padding:40px 10px 6px 10px;
    }

    #content-container {
     top:225px;
     position:absolute;
     margin:0 auto;
     width:1000px;
     background-color:#fff;
    }

    #content {
     clear:left;
     float:left;
     width:610px;
     padding:20px 0;
     margin:0 0 0 30px;
     display:inline;
    }

    #content h2 {
     margin:0;
    }

    #aside {
     float:right;
     width:290px;
     padding:20px 0;
     margin:0 20px 0 0;
     display:inline;
    }

    #aside h3 {
     margin:0;
    }


<div id="wrapper">
<div id="header">
 <a id="box-link" href="index.html"></a>
    <div id="menu">
       <ul>
          <li><a href="" title="Link01">Link01</a></li>
          <li><a href="" title="Link02">Link02</a></li>
          <li><a href="" title="Link03">Link03</a></li>
          <li><a href="" title="Link04">Link04</a></li>
          <li><a href="" title="Link05">Link05</a></li>
          <li><a href="" title="Link06">Link06</a></li>
          <li><a href="" title="Link07">Link07</a></li>
          <li><a href="" title="Link08">Link08</a></li>
       </ul>        
    </div>
  <div id="content-container">
  <div id="content">
   <h2>
    Page heading
   </h2>
   <p>
    Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
   </p>
   <p>
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
   </p>
   <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
   </p>
  </div>
  <div id="aside">
   <h3>
    Aside heading
   </h3>
   <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
   </p>
  </div>
 </div>
</div>
</div>
</div>

Answer 1

只需从＃content-container类中删除position:absolute;即可。否则忽略margin:0 auto;。此外，看起来你错过了上面的两个结束div标签。

Answer 2

这个问题有几个解决方案。

最简单的方法是从＃content-container中删除绝对定位。这将允许margin: 0 auto将div居中。为了解决当你将鼠标悬停在菜单上时垂直移动的问题（我怀疑这是为什么你把它放在绝对位置），只需设置菜单div的高度（100px似乎就足够了，但你可以玩它）。所以这些是你的修改：

 #menu {
      margin-top:150px;
      clear:left;
      float:left;
      padding:0;
      border-top:6px solid #336699;
      width:100%;
      overflow:hidden;
      height: 100px;
  }

  #content-container {
      margin:0 auto;
      width:1000px;
      background-color:#fff;
      left: 100px;
  }

另一个解决方案，如果你真的想让＃content-container绝对定位，就是将#content-container div包装在另一个div中，比如＃inner-wrapper，并将div的位置设置为relative。这将使#content-container本身相对于＃inner-wrapper而不是窗口。 CSS可能看起来像这样：

  #inner-wrapper {
    position: relative;
    margin: 0 auto;
    width: 1000px;
  }

然而，单独这个技巧不会使菜单保持一致。要做到这一点，你必须将菜单包装在这个新的div中，并修改你的CSS / HTML，使蓝色顶部边框仍然扩展页面的宽度。不是太难，但它更有用。

就个人而言，我只是做第一个解决方案，并称之为一天。

CSS，在100％宽度<div> </div> </div>中居中绝对<div>

2 个答案: