CSS对齐框

Question

我有一个包含3列内容的页脚。目前，CSS正在使用float:left。我尝试了以下但我不能让它对齐垂直和水平。

• 显示块
• display block-inline
• margin：0 auto

HTML：

<div id="footer">
  <div class="column">
    <h3>Information</h3>
    <ul>
            <li><a href="">Delivery Information</a></li>
            <li><a href="">Privacy Policy</a></li>
            <li><a href="">Terms &amp; Conditions</a></li>
          </ul>
  </div>
</div>

CSS：

#footer .column {
    float:left;
    width: 25%;
    min-height: 100px;
}

Answer 1

.column ul li{
    float:left;
    width: 25%;
    min-height: 100px;
}

如果这就是你的问题，那么上面会水平对齐

修改

<div class="footer" id="footer">
    <div class="column">
        <h3>Information</h3>
          <ul>
            <li><a href="">Delivery Information</a></li>
            <li><a href="">Privacy Policy</a></li>
            <li><a href="">Terms &amp; Conditions</a></li>
         </ul>
     </div>
</div>

.footer.column{
    float:left;
    width: 25%;
    min-height: 100px;
}

Answer 2

你应该使用绝对位置的容器div，＃footer应该有位置相对。 这是解决方案代码 http://jsfiddle.net/7Pcag/1/

或更简单的解决方案http://jsfiddle.net/7Pcag/5/

Answer 3

我相信你已经有了正确的解决方案，所以你可能会做错其他的事情。我将你的最小高度调整为150px，这里的工作正常：http://jsfiddle.net/xkdk9/1/

Answer 4

<div class="footer">
<div class="columns">
    <div class="column">
        Information
        <ul>
            <li>One</li>
            <li>One</li>
            <li>One</li>
        </ul>
    </div>
    <div class="column">
        Information
        <ul>
            <li>Two</li>
            <li>Two</li>
            <li>Two</li>
        </ul>
    </div>
    <div class="column">
        Information
        <ul>
            <li>Three</li>
            <li>Three</li>
            <li>Three</li>
        </ul>
    </div>
</div>
</div>

<style>

.footer
{
    width:100%;
    background-color:Yellow;
}

.footer .columns
{
    text-align:center;
}

.column
{
    text-align:center;
    display:inline;
    width: 150px;
}

</style>