Question

我试图将我的#col div对准我的容器中心。我试图使用marign：0 auto来做到这一点，但我不明白为什么我的div没有在中心对齐。有人可以帮我搞清楚吗？

Html Im用于此示例：

  <footer id="footer-container">
    <section id="footer">
         <div id="col" >
           <h1>Title of post</h1>
           <p>Post Content.</p>
         </div>
         <div id="col" >
           <h1>Title of Post 2</h1>
           <p>Post Content 2</p>
         </div>
    </section>
</footer>

的CSS：

#footer-container
{
    width:100%;
    height:auto;
    float:left; 
    background:gray;
} 


#footer
{
    width:480px;
    margin:10px auto 10px auto;
}

#col
{
    float:left;
    margin-bottom:10px;
    background:yellow;
    width:400px;
}

#col h1
{
    border-bottom:1px dashed #ccc;
    color:#fff; 
    font-size:17px;
    font-weight:bold; 
    margin-bottom:10px; 

}


#col p
{
    color:#fff;
    text-align:justify;
    color:#ccc; 
    font-size:15px; 
    margin-bottom:10px;
    text-align:justify;
}

Answer 1

首先，避免重复id - 它们必须是唯一的。

由于#col元素的宽度为400px，因此关闭中心。因此，如果您希望内容居中，则父元素#footer的宽度应该相同。

Updated Example

#footer {
    width:400px;
    margin:10px auto;
}

此外，#footer元素正在折叠，因为它的子元素正在浮动。您可以通过添加clearfix来解决此问题。

将overflow:hidden添加到元素：

#footer {
    width:400px;
    margin:10px auto;
    overflow:hidden;
}

..或添加传统的clearfix。

#footer:after {
    content:'';
    display:table;
    clear:both;
}

Answer 2

首先，您不应多次使用相同的ID！而是使用类

其次，在你的CSS中，我没有看到任何margin: 0 auto

最后，您的#col向左浮动！它不会居中！

删除float属性，并设置右边距属性

#col{
   margin: 10px auto;
}

一个固定的工作示例：http://jsfiddle.net/V8NaR/3/

Answer 3

这样做：

#footer-container
{
    width: 100%;
    text-align: center;
    background:gray;
} 


#footer
{
    display: inline-block;
}

我的div #col在中心不对齐

3 个答案: