css - 两列布局在宽度减小时变为居中布局

时间：2011-08-11 00:23:33

标签： css layout html

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

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

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

有什么想法吗？

答案 0 :(得分：1)

我可以通过将每列显示为内联块来完成＃2 以他们为中心。但是当包装纸处于全宽时，则更短柱在底部垂直对齐，通常位于底部屏幕。

如果您还将vertical-align: top添加到display: inline-block的任何内容中，那将会很好用。