垂直排列时的中心元素内容

Question

我正在努力建立一个快速响应的网站。我希望当水平尺寸减小到这些div不再在同一条线上时，内容在页面上居中。我可以设置@media (max-width:并将其设置为任意数字，但这些div的宽度可能会因更改内容而发生变化。

HTML：

<div class="cool">
    <h1>Foo</h1>
</div>
<div class="story">
    <h1>Bar</h1>
</div>

CSS：

.cool {
    float: left;
}
.story {
    float: right;
}

演示：http://jsfiddle.net/a0vk35yc/1/

更新：更好的演示。

Answer 1

逻辑上，页面上的元素必须具有某种最小内容宽度，否则它们总是并排放置，并且可以缩小到任何像素宽度。

在页面流完成之前，可能无法知道此最小宽度，因此您需要在document.onLoad Javascript处理程序中执行此操作。计算left_min_width和right_min_width并使用(left_min_width+right_min_width)px处的断点设置媒体查询。