垂直排列時的中心元素內容

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的媒體查詢。