當孩子的數量可能不同時，將div的孩子置於中心位置

我有一個場景，其中有一個940像素的寬度框，最多有4個子像素爲140像素，其間有20像素，浮動在一條線上。如果有1,2,3或4個子div，我希望CSS強制將該子div組居中。目前，當第4個被移除時，前3個的位置不會改變。當孩子的數量可能不同時，將div的孩子置於中心位置

我正在使用LESS。

我的代碼：

#parent 
{ 
    position: relative; 
    width: 940px; 
    clear: both; 
    background-image: url(../images/bg.png); 
    background-repeat: repeat-x; 
    height: 100px; 
    margin: 0 auto; 
    margin-top: 2px; 
} 

#parent h1 
{ 
    position: absolute; 
    color: white; 
    font-size: 36px; 
    font-weight: 400; 
    margin: 0; 
    padding: 0; 
    left: 5px; 
    top: -24px; 
} 

#children 
{ 
    position: relative; 
    margin: 0 auto; 
    margin-top: 35px; 
} 

.child 
{ 
    width: 140px; 
    padding-right:20px; 
    float: left; 
    text-align: center; 
} 

#children:last-child 
{ 
    padding-right: 0px; 
    clear: right; 
}

編輯：和HTML ...

<div id="parent"> 

    <h1>Lorem Ipsum</h1> 

    <div id="children"> 

     <div class="child" id="1"></div> 
     <div class="child" id="2"></div> 
     <div class="child" id="3"></div> 
     <div class="child" id="4"></div> 

    </div> 

</div>

此外，小童人數：最後一個孩子似乎無所作爲。我是否應該將其規則應用於＃4？

來源

2012-09-07 Richard

我們應該猜到你的HTML，或者是你能告訴我們你正在使用的是什麼？ –

你是如何添加div的。你是動態添加這些還是事先定義這些？..？ –

添加了HTML。 – Richard

只需設置的div小童人數爲100％和文本對齊的寬度中心，所以它的CSS變成這樣：

#children 
{ 
    position: relative; 
    margin: 0 auto; 
    margin-top: 35px; 
    width: 100%; 
    text-align: center; 
}

並必須刪除float屬性，並給孩子們元素它們的相對位置：

.child 
{ 
    width: 140px; 
    padding-right:20px; 
    text-align: center; 
    position: relative; 
}

它應該工作。此外，如果你清楚地說明了最後一個孩子選擇通過它的ID，它是首選：最後孩子在IE7或IE6不會工作：

#4.child{ 
    padding-right: 0px; 
    clear: right; 
}

而且我覺得你不應該開始使用數量的任何ID，ID =「1 「| id =「2」等。它的語法不正確。

來源

2012-09-08 00:37:37

他正在使用塊級元素（Div），所以這將工作，如果他還添加： display：inline-block; 給孩子。此外，如果您不希望孩子的內容也在子div內居中，您也可以重置.child文本 - 向左對齊。 – Mark

是的，如果他添加了display：inline-block，但是在IE6中不支持inline-block屬性，我今天也遇到了同樣的問題，我必須將顯示設置爲內聯。 –

您可以使用內聯獲得相同的結果，但缺點是如果它們的高度不同，它將成爲交錯排列。儘管我不認爲支持IE6已經很普遍了。不使用display：inline;或內聯塊;由於DIV是塊級元素，它將無法正常工作。 – Mark

這裏是它的jsfiddle工作：

http://jsfiddle.net/emYfz/

#children { 
    width: 100%; 
    text-align: center  
} 

.child { 
display: inline-block; 
width: 140px; 
height: 20px; 
margin: 5px; 
background: #f00; 
}

來源

2012-09-08 00:44:12 Mark

當孩子的數量可能不同時，將div的孩子置於中心位置

回答

相關問題