我發現this similar question但無法使其工作。水平中心在一個容器div內的兩個div

我在我的CSS標記爲「盒子」兩米格的容器，我不能讓他們的父母專區內居中（標記爲我的CSS「包裝」）

這裏是我的代碼：https://jsfiddle.net/jord8on/fjtq28g7/

CSS：

.wrapper { 
    display: inline-block; 
    margin: 0 auto; 
} 

.box { 
    display: inline-block; 
    width:370px; 
    height: 370px; 
    padding-left: 5px; 
    padding-right: 5px; 
    vertical-align: top; 
}

任何幫助將不勝感激！

來源

2016-11-03 jord8on

你應該改變一些風格的包裝，你會好：

.wrapper { 
    display: block; 
    text-align: center; 
}

https://jsfiddle.net/fjtq28g7/3/

編輯

如果，你的評論，Flexbox的仍是一個選項，你可以試試這個：

https://jsfiddle.net/fjtq28g7/7/

個唯一的實際變化是在包裝：

.wrapper { 
    display: flex; 
    text-align: center; 
    justify-content: space-around; 
    flex-wrap: wrap; 
    padding: 0 3%; 
}

來源

2016-11-03 20:10:12 daanvanham

#nailedit非常感謝你解答我的問題這個快速答案！ – jord8on

@jordazzle不客氣:) – daanvanham

對你來說還有一個問題@daanvanham - 我如何將這兩個「盒子」div放在每個div的左側和右側有相等數量的間距？那有意義嗎？這裏是一個圖片（如果它被接受）http://take.ms/FEeuj➞我希望間距等於第一個「方塊」等號空間左邊的中間和等於第二個「右邊的空格」「 – jord8on

#wrapper { 
    display: inline-block; 
    text-align: center; 
} 

.box { 
    display: table; 
    width:370px; 
    height: 370px; 
    margin: 0 auto; 
    padding-left: 5px; 
    padding-right: 5px; 
    vertical-align: top; 
}

這應該爲你做：D只是將顯示屬性更改爲表，並給它一個自動邊緣。很常見的情況

====編輯

考慮您的意見，這裏是你應該做的：

.wrapper { 
    display: inline-block; 
    margin: 0px auto; 
    width: 100%; 
} 

.box { 
    display: table; 
    width:370px; 
    height: 370px; 
    margin: 0 auto; 
    padding-left: 5px; 
    padding-right: 5px; 
    vertical-align: top; 
} 

.box-container { 
    width: 50%; 
    float: left; 
}

然後就是換你.box的分度，.box的容器股利。這樣你有兩個50％寬的容器，你的盒子居中居中。

https://jsfiddle.net/9mzmu6r7/4/

來源

2016-11-03 19:53:05 leofontes

感謝您的超級快速響應！我嘗試了你的建議，但第二個框包裝到下一行，而不是集中在與其他div「盒子」相同的水平https://jsfiddle.net/jord8on/9mzmu6r7/ – jord8on

@jordazzle我編輯了我的答案，現在檢查;） – leofontes

Ooooh！這看起來不錯@leofontes！唯一的挑戰是，當屏幕寬度變得太小時，我希望右側的容器可以包裝到下一行。 @daanvanham提供了這個工程的例子！ https://jsfiddle.net/fjtq28g7/3/（我唯一希望得到的例子就是像你的那樣間隔出來！ – jord8on

Flexbox的解決方案

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
.box { 
 
    width: 370px; 
 
    height: 160px; 
 
    margin: 5px; 
 
    background: #aef; 
 
}

<div class="wrapper"> 
 
    <div class="box">Box 1</div> 
 
    <div class="box">Box 2</div> 
 
</div>

注：如果需要，您supported browsers添加柔性供應商前綴。

來源

2016-11-03 20:02:13

Flexbox的是去

.wrapper { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    margin: 0 auto; 
 
} 
 

 
.box { 
 
    width:370px; 
 
    height: 370px; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    vertical-align: top; 
 
}

顯示器撓性會並排放置的div側的方式，並與證明的內容，你以他們爲中心。從childs刪除顯示行內塊的工作。使用mz-webkit等支持較老的瀏覽器

來源

2016-11-03 20:15:21

感謝您對此的看法。它很好地工作，但不幸的是，當屏幕寬度變小時，我的第二個「盒子」沒有包裝到下一行。 @daanvanham提供了這個工程的例子！ jsfiddle.net/fjtq28g7/3 – jord8on

只需添加flex-flow：row wrap;在證明內容之前，你有：D –

水平中心在一個容器div內的兩個div

回答

編輯

Flexbox的解決方案

相關問題