你如何居中對齊浮動div的父容器沒有寬度？

我知道類似的問題之前已經被問過，但我還沒有看到一個父div具有未知寬度並且有確定答案的地方。你如何居中對齊浮動div的父容器沒有寬度？

所以這裏的情況。

<style> 
.parent { 
    width: 100%; 
} 

.child { 
    width: 300px; 
    float: left; 
} 

</style> 

<div class="parent> 
    <div class="child></div> 
    <div class="child></div> 
    <div class="child></div> 
    <div class="child></div> 
    <div class="child></div> 
    <div class="child></div> 
    ... 
    <div class="child></div> 
<div>

基本上，我想在用戶的屏幕分辨率可以支持的父容器中安裝儘可能多的子div。

我不想使用css3媒體查詢，因爲我想支持IE7。

我嘗試使用JavaScript來指定父寬度，但它不是理想的，因爲內容加載後跳轉到中心。有任何想法嗎？

來源

2011-11-15 tkaravou

http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu – reisio

這是不使用javascript的最近解決方案。同時使div邊欄位於中心的是display:inline-block;。我已嘗試將.parent轉換爲display:table-cell;，但無效。所以需要使用實際的<table>來實現強大的居中行爲。

http://jsfiddle.net/Dgdhr/

編輯：http://jsfiddle.net/Dgdhr/1（不含表：感謝MartinodF）

<table width="100%"> 
<tr> 
<td align="center"> 
      <div class="child">1</div> 
      <div class="child">2</div> 
      <div class="child">3</div> 
      <div class="child">4</div> 
      <div class="child">5</div> 
      <div class="child">6</div> 
</td> 
</tr> 
</table> 

.child { 
    width: 100px; 
    height:100px; 
    margin:10px; 
    display:inline-block; 
    background:#e0e0e0; 
}

來源

2011-11-15 03:53:33

你不需要''

元素。見http://jsfiddle.net/MartinodF/Dgdhr/1/ – MartinodF

這個問題是，如果你有不同的內容在兒童divs內; http://jsfiddle.net/Dgdhr/76/ – Marcus

只需使用display:inline-block;的float: left;而不是和.parent使用text-align: center。

來源

2012-07-14 21:08:33 Roman

謝謝男士謝謝:) – Farshid

使用羅馬答案我結束了這一點。我父母div中的所有div都將居中，所以你不需要設置子類。

.parent{ 
    text-align: center; 
} 

.parent div{ 
    display: inline-block; 
}

來源

2014-03-07 00:28:04

相關問題

你如何居中對齊浮動div的父容器沒有寬度？

回答

相關問題