Question

我有一个form，其中两个fieldsets使用flexbox来对齐元素。第二个字段集包含两个按钮，我想在一行中显示并在此行中居中。

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

我准备了这个fiddle。

Answer 1

Flexbox和<fieldset>混合不好：http://jsfiddle.net/w9k5y/9/所以你最好现在用<div>包装flex-box指令。

但是对于这种情况，你甚至不必使用flexbox。 text-align: center;会为您带来相同的结果：http://jsfiddle.net/w9k5y/1/这与Romain的想法相同，但这次您不一定需要额外的<div>。

Answer 2

最好的方法是在按钮周围创建一个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 
}

使用flexbox对齐字段集中的元素

2 个答案: