居中對齊內嵌塊元素的集合而不居中每個元素

Question

我的代碼中有一個複雜的層次結構，無法真正改變。它是一個包含圖像的內嵌塊div的集合，位於外部div內部。就像這樣：

<div> <!-- text-align: center --> 
    <div><img/></div><!-- display: inline-block --> 
    <div><img/></div><!-- display: inline-block --> 
    <div><img/></div><!-- display: inline-block --> 
    <div><img/></div><!-- display: inline-block --> 
    <!-- ... --> 
</div> 

我需要這些圖像來填充基於用戶瀏覽器窗口的屏幕。我還需要將圖像本身左對齊 - 因此，如果瀏覽器每行可以容納5個圖像，並且最後一行只有1個圖像，則該圖像需要一直到左側，而不是居中。但是，我需要整個團隊中心對齊，所以我們右側沒有巨大的白色邊緣。

我試圖在層次添加另一個div這樣的事情：

<div><!-- text-align: center --> 
    <div><!-- display: inline-block --> 
     <div><img/></div><!-- display: inline-block --> 
     <div><img/></div><!-- display: inline-block --> 
     <div><img/></div><!-- display: inline-block --> 
     <div><img/></div><!-- display: inline-block --> 
     <!-- ... --> 
    </div> 
</div> 

這不，工作，因爲中間的div結束是在全寬儘管是inline-block的。一個例子可以在這裏找到：http://jsfiddle.net/cwmRw/

任何想法，我怎麼能做到這一點？謝謝！

Answer 1

您可以使用CSS3 Media Queries通過根據不同分辨率邊界值設置div的寬度來實現此目的。我在這裏複製了CSS，以防jsfiddle不能永久保留它。

.img-block{ 
    max-width: 160px; 
    max-height: 160px; 
} 
.div-block{ 
    display: inline-block; 
} 
.img-container{ 
    margin-left: auto; 
    margin-right: auto; 
} 

@media all and (min-width:984px){ 
    .img-container{ 
     width: 985px; 
    } 
} 

@media all and (min-width:820px) and (max-width: 984px){ 
    .img-container{ 
     width: 820px; 
    } 
} 
@media all and (min-width:656px) and (max-width:820px){ 
    .img-container{ 
     width: 656px; 
    } 
} 
@media all and (min-width:492px) and (max-width:656px){ 
    .img-container{ 
     width: 492px; 
    } 
} 
@media all and (min-width:328px) and (max-width:492px){ 
    .img-container{ 
     width: 328px; 
    } 
} 
@media all and (min-width:164px) and (max-width:328px){ 
    .img-container{ 
     width: 164px; 
    } 
} 

這裏的原代碼http://jsfiddle.net/hxHuV/9/

Answer 2

如果你知道你的圖片的寬度和每行圖像的數量，那麼你可以設置你的容器的寬度和fiddle與margin: 0 auto水平居中它像而浮動圖片的容器內，避免由於inline-block，每個圖像之間的空白（4px間隙）。您不需要.sub容器了，但是如果將其移除，則需要在容器元素上使用clearfix，因爲它只包含浮動元素，並且在流程中沒有其他元素：updated fiddle
或者沒有浮動元素，您需要刪除空白通過例如通過寫</div><div>（最好在HTML代碼中刪除空格，然後試圖否定其在CSS效果，這是更強大的）

或者你可以用文本居中對齊的容器，並設置.sub像寬度這其他fiddle

Answer 3

如果您被允許使用jQuery，這裏是一個工作解決方案：
http://jsfiddle.net/cwmRw/6/

它動態計算寬度img-sub-container並且如果窗口大小改變，它也會重新計算它。

對於純粹的CSS解決方案，您需要知道img-sub-container（像素，百分比...）的寬度。

與高度不同，寬度在塊級元素中儘可能地左右擴展。

如果您img-sub-container一個內聯元素，讓我們display:inline-block;說，你仍然需要width，以便爲margin: 0px auto;設置工作和居中。

既然你不知道你需要多少寬度，你必須動態計算和設置它。