我的div #col它不在中心對齊

Question

我試圖將我的#col div對准容器的中心。 我試圖使用marign：0 auto來做到這一點，但是我不明白為什么我的div不在中心對齊。 有人可以幫我弄清楚嗎？

問題的示例： http : //jsfiddle.net/V8NaR/2/

我在此示例中使用的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 ，所以#col關閉狀態。 因此，如果要使內容居中，則父元素的寬度#footer應該相同。

更新示例

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