当宽度减小时变为居中布局的两列布局

Question

我的目标是在页面中居中放置两列＃1。当窗口宽度减小并且两个列不再并排放置时，它们都应该是＃2，在页面中居中，一个在另一个下面。

我通过将两列放在最大宽度的包装中并将它们左右浮动来实现＃1。但是，当包装宽度减小时，列对齐左侧和右侧，而不是页面的中心。

我可以通过将每列显示为inline-block并使它们居中来完成＃2。但是，当包装纸为全宽时，较短的一列在底部垂直对齐，这通常位于屏幕下方。

任何想法？

Answer 1

我可以通过显示每列作为内嵌块和 居中它们来完成＃2。但是，当包装纸全宽时，较短的 列在底部垂直对齐，通常位于 屏幕下方。

这会工作得很好，只要你还可以添加vertical-align: top到任何具有display: inline-block。

你描述它的问题：http://jsfiddle.net/thirtydot/Xyrta/

随着vertical-align: top修复：http://jsfiddle.net/thirtydot/Xyrta/1/