使中间列内容正确地居中

Question

我尝试创建此页面：http://ascendancyconsulting.com/Landings/ACConsult1.html 但我有问题让事情正确地集中。如果可能的话，我会设置固定宽度来做这件事，因为我希望它能在窗口尺寸上找到一些东西。

注意发生了什么： 标题不是在“shell”div中居中。 2.当窗口变窄时，选择框会在中间列上移动，而不是仅仅停止并创建一个侧面滚动条。 底部的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都可以。保证金：0自动是实际居中的。

如果你的目标是IE8 +，那么改为使用它可能会更好：

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

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