使用flexbox對齊字段集中的元素

我有form兩個fieldsets使用flexbox來對齊元素。第二個字段集包含兩個按鈕，我要在一行中顯示並居中顯示在該行中。使用flexbox對齊字段集中的元素

/-----------------------------------\ 
|  /----------\ /----------\  | 
|<-x->| Button A | | Button B |<-x->| 
|  \----------/ \----------/  | 
\-----------------------------------/

我已經準備好了這個fiddle。

來源

2013-10-29 net.user

可能的重複[爲什麼不是所有的柔性箱元件的行爲都像柔性箱div？]（http://stackoverflow.com/questions/19679337/why-are-not-all-flexbox-elements-behaving-like-flexbox-的div） – JohnB

Flexbox的和<fieldset>不拌勻：http://jsfiddle.net/w9k5y/9/所以你最好換用<div>柔性盒說明現在。

但是對於這種情況，您甚至不必使用flexbox。 text-align: center;爲您帶來相同的結果：http://jsfiddle.net/w9k5y/1/這與羅曼的想法是一樣的，但這次您不一定需要額外的<div>。

來源

2013-10-29 17:50:10

最好的辦法是在按鈕周圍創建一個div容器。設置容器的變量/固定寬度等於按鈕總寬度。

Here is an example

HTML

<div id="container"> 
    <button>Button A</button> 
    <button>Button B</button> 
    </div>

CSS

#container { 
    width: 30%; 
    margin: 0 auto; 
}

否則，有一種野性的方式來做到這一點。

You can review it here

CSS

#container { 
text-align: center 
}

來源

2013-10-29 17:33:08 Romain

使用flexbox對齊字段集中的元素

回答

相關問題