html - 问题是将我的页脚 4 列居中对齐

Question

我想做一个有 4 列的页脚，我希望 2 列保持在这些列的上方，其他的列在这些列的下方。

我已经成功地做到了这一点，但现在我在将我的 4 列对齐到我的 div #footer1 中心时遇到了一些困难。

我正在尝试:http://jsfiddle.net/GM23h/2/ (使用 margin:0 auto)

我的 html:

<footer class="footer-container">
    <section class="footer1">
         <div class="col">
            <h1>Contacts</h1>
            <ul>
                <li><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
                <li ><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
            </ul>
       </div> 
        <div class="col">
            <h1>Contacts</h1>
            <ul>
                <li><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
                <li ><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
            </ul>
       </div> 

        <div class="col">
            <h1>Contacts</h1>
            <ul>
                <li><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
                <li ><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
            </ul>
       </div> 

        <div class="col">
            <h1>Contacts</h1>
            <ul>
                <li><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
                <li ><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
            </ul>
       </div> 

    </section>
  </footer>

我的CSS:

.footer-container
{
    width:100%;
    height:auto;
    float:left; 
} 

.footer1
{
    width:600px;
    margin:10px auto 10px auto;
    background:gray;
    overflow:hidden;
}

.footer1 ul 
{
    list-style:none; 
}


.footer1 ul li
{
    margin:0 0 7px 0;
}

.footer1 ul li a 
{   
    text-decoration:none;
}

.col
{
    float:left;
    margin:10px 10px 10px 10px;
    width:270px;
    height:155px;
    background:yellow;
}

.col h1
{
    border-bottom:1px dashed #ccc;
    color:#fff; 
    font-size:14px;
    margin-bottom:10px; 
    width:160px;
}

Answer 1

添加到您的 .footer1 CSS 类:

text-align: center;

并替换为您的 .col CSS 类

float:left;

与

display:inline-block;

Example