緊密裝配較小的內嵌塊div圍繞較大的浮動左邊

Question

一切都很好，直到我試圖文本對齊：center;我的div。顯然，浮動的div忽略了文本對齊，但浮動的div需要這樣才能在同一行上放置兩個較小的div。

這很難解釋，但這裏是代碼的例子來描述它更好地：

https://jsfiddle.net/8fu5b9td/3/

.featured-series { 
    width:606px; 
    height:406px; 
    display:inline-block; 
    float:left; 
    margin:3px 3px 3px 3px; 
    background-color:black; 
} 

所有我想知道的是如何使特色系列DIV的行爲像標準系列divs，並在同一時間中心。謝謝！

Answer 1

我結束了JS的一點點捏造的。我知道這很淘氣，但是它做的很好，而且資源相當便宜。

function centerContent(){ 
    $('.center-content').width(Math.floor($('.body').width()/306)*306); 
} 

setInterval(centerContent, 250); 

.center-content has margin：0 auto;它是所有系列div的容器。我發現，因爲我無法設置寬度，所以我真的做不了多少，所以我讓JS根據屏幕大小將寬度設置爲最佳。

不是最乾淨的解決方案，我更喜歡純JS，但如果它工作，它的工作原理。

編輯：.body類是一個在它內部加載ajax的div，當它改變大小時，它基本上就像普通頁面上改變大小一樣。

Answer 2

刪除float:left;並將margin:0 auto;添加到它。

.featured-series { 
    width:606px; 
    height:406px; 
    display:inline-block; 
    margin:0 auto; 
    background-color:black; 
} 

Answer 3

試試這個https://jsfiddle.net/8fu5b9td/7/

CSS

@media(max-width: 930px) { 
    .featured-series { 
     margin: 0 auto; 
     float: none; 
    } 
} 

@media(max-width: 610px) { 
    .featured-series { 
     background-color: black; 
     display: block; 
     height: 200px; 
     margin: 0 auto; 
     vertical-align: top; 
     width: 300px; 
     float: none; 
    } 
}