如何對齊父代中心的所有左浮動元素？

-1

.main-container{width:100%;height:auto;padding:0px;background-color:#FF0000;} 
 
.sub-container{width:50%;height:auto;padding:10px;box-sizing:border-box;margin:0px;background-color:#00FF00;float:left;text-align:center;margin-top:10px;} 
 
.child{width:100px;height:30px;line-height:30px;text-align:center;border-radius:2px;background-color:#FFFF00;float:left;margin:2px;}

<div class="main-container"> 
 
    <div class="sub-container"> 
 
    <div class="child"> 
 
     First 
 
    </div> 
 
    <div class="child"> 
 
     Second 
 
    </div> 
 
    <div class="child"> 
 
     Third 
 
    </div> 
 
    <div class="child"> 
 
     Fourth 
 
    </div> 
 
    </div> 
 
</div>

我要對齊的.sub-container在中心的內容，而無需對.child使用屬性display: inline-block;。

來源

2016-07-15 Rohit Sharma

爲什麼'inline-block'不是選項？ – Shaggy

對不起，但內聯塊不是一種選擇，因爲我「想」使用'浮動'屬性..！ –

居中的第一條規則是**不使用浮動**。 –

在這裏看到：jsfiddle

編輯：使用display:flex與justify-content:center在.sub-container和display:inline-block到.child

或者你可以使用上.childfloat:left，它仍然有效。但我建議，當你想中心未便您不使用浮動

代碼：

.child 
{ 
width: 50px; 
height: 30px; 
text-align: center; 
border-radius: 10px; 
background-color: #FFFF00; 
display:inline-block; 
} 

.sub-container 
{ 
width: 50%; 
height: auto; 
padding: 10px; 
box-sizing: border-box; 
margin: 0px auto; 
background-color: #00FF00; 
float: left; 
text-align: center; 
position:relative; 
display: flex; 
justify-content: center; 
}

讓我知道，如果這是你要找的

來源

2016-07-15 08:53:11

對不起..！但.child是導航按鈕，所以我不能使用那麼大的寬度.....！ –

編輯我的答案。 –

如果我使用屬性'display：flex'，我將使用以下媒體查詢來更改調整瀏覽器窗口大小時.child的寬度..： \t @media僅限屏幕和（最大寬度：300px） \t { \t \t .child \t \t { \t \t \t寬度：100％; \t \t} \t} \t但是因爲我正在使用屬性'display：flex''在.sub容器中，所以這個媒體查詢將無法正常工作...！ –

什麼添加到.main-container { margin: 0 auto; display: table; }和刪除width:100%;

來源

2016-07-15 09:10:30 vignesh

也許這可以幫到你：添加保證金50％ - 容器寬度的一半。只是一個免責聲明：這在某些瀏覽器中不受支持。

.child 
{ 
width: 100px; 
height: 30px; 
margin-left: calc(50% - 50px); 
text-align: center; 
border-radius: 10px; 
background-color: #FFFF00; 
float: left; 
}

來源

2016-07-15 09:13:21 Tezekiel

如何對齊父代中心的所有左浮動元素？

回答

相關問題