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

Question

我有form两个fieldsets用于flexbox对齐元素。第二个字段集包含两个按钮，我希望它们连续显示并在该行中居中。

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

我准备了这个小提琴。

Answer 1

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

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

Answer 2

最好的方法是在按钮周围创建一个 div 容器。设置容器的可变/固定宽度，等于您的按钮总宽度。

这是一个例子

HTML

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

CSS

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

否则，有一种疯狂的方法可以做到这一点。

你可以在这里查看

CSS

#container {
 text-align: center 
}