html - 使中间列内容正确居中

Question

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

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

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

Answer 1

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

看看这里：http: //twitter.github.io/bootstrap/

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

Answer 2

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

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

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

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

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

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