如何居中對齊浮動元素？

-1

我有一個包裝盒，裏面有一系列的div。這是我面臨的一些問題。
當我調整窗口的大小時，元素顯示爲左對齊。我如何集中對齊它們。如何居中對齊浮動元素？

此外，另一個問題是div的大小略有不同，這使得它們不一致。

.left_wrapper  
{    
    max-width: 70%; 
    margin:0 auto; 
    float:left; 
} 


.boxa 
    { 
    background-color: #45e645; 
    display:inline; 
    position:relative; 
    left:4%; 
    float:left; 
    margin: 1% 1%; 
    padding:1%; 
    font-size: 85px; 
    text-align:center; 
    border:1px solid green; 

} 




<div class="left_wrapper" id="roll_nos"> 
    <div id="box" class="boxa">01</div> 
    <div id="box" class="boxa">02</div> 
    <div id="box" class="boxa">03</div> 
    <div id="box" class="boxa">04</div> 
    ............. 
    ............. 
    ............. 
    ............. 

</div>

如所建議的，問題是NOT上述問題的一個重複，雖然問題是（僅）類似於呈現在那裏的一個。

我接受的和最有價值的答案不適用於我的情況，因爲我希望元素在調整窗口大小時自動移動到下一行。感謝'@Niet the Dark Absol'，柔性包裝解決方案正在努力將元素居中對齊，但仍存在輕微的錯位，＃13附近的紅線突出顯示了它。

來源

2017-04-07 Ramesh Pareek

您應該使用柔性來代替。 – SLaks

使用內聯塊代替浮動https://jsfiddle.net/2ges6t4b/1/ – DaniP

不，請問，我的問題是不同的。請看小提琴，調整窗口大小然後注意問題。 –

爲您而異格大小「紅線aligment」我建議補充：

.boxa { 
    min-width: 85px; 
}

來源

2017-04-10 17:09:26

使用這個沒有float:left代碼我發現從我的電腦和瀏覽器好吧！

.left_wrapper  
    {    
    max-width: 70%; 
    margin:0 auto; 
}

來源

2017-04-08 07:10:09 Momin

如何居中對齊浮動元素？

回答

相關問題