使中间列内容正确居中答案

【问题标题】：Getting Middle Column Content to Center Properly使中间列内容正确居中
【发布时间】：2013-07-05 04:19:01
【问题描述】：

我正在尝试创建此页面：http://ascendancyconsulting.com/Landings/ACConsult1.html 但我在让事情正确居中时遇到问题。如果可能的话，我会在不设置固定宽度的情况下这样做，因为我希望它可以调整一些窗口大小。

注意发生了什么： 1. 标题不在“shell” div 中居中。 2. 缩小窗口时，选择加入框会在中间列上重叠，而不是停止并创建横向滚动条。 3.底部的3个徽章/按钮应该不是水平排列的，但其中一个显示在下方；并且它们（如果可能的话）应该在窗口变窄时向左移动，而不是在点击“左徽章”div时停止。

我需要进行哪些更改才能使其流畅运行？ div 布局有意义还是我做错了？？

【问题讨论】：

【解决方案1】：

您可以将此 CSS 应用于内部 div：

#MiddleColumn {
    width: 50%;
    margin: 0 auto;
}

当然，您不必将宽度设置为 50%。任何小于包含 div 的宽度都可以。 margin: 0 auto 是实际居中的位置。

如果您的目标是 IE8+，最好使用这个：

    #MiddleColumn {
         display: table;
         margin: 0 auto; 
}

它将使内部元素水平居中，并且无需设置特定宽度即可工作。

【讨论】：

【解决方案2】：

如果您查看 Twitter Bootstrap，则此类问题会更好。它是一个包含已经设置好的 css 文件的库，因此您可以更快地执行操作，并且它们会根据窗口宽度等自动调整大小和移动。

下次还提供一个代码，以便查看您的问题的人可以发现错误是什么，而不必自己弥补。

【讨论】：