Align elements in a fieldset using flexbox

Question

I have a form with two fieldsets using flexbox to align elements. The second fieldset contains two buttons which I want display in a row and centered in this row.

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

I have prepared this fiddle.

Possible duplicate of [Why are not all flexbox elements behaving like flexbox divs?](http://stackoverflow.com/questions/19679337/why-are-not-all-flexbox-elements-behaving-like-flexbox-divs) — JohnB, Feb 09 '16 at 18:22
[Flexbox not working on button or fieldset elements](https://stackoverflow.com/q/35464067/3597276) — Michael Benjamin, Mar 09 '19 at 12:16

score 3 · Accepted Answer · answered Oct 29 '13 at 17:50

Flexbox and <fieldset> don't mix well: http://jsfiddle.net/w9k5y/9/ So you better wrap flex-box instructions with a <div> for now.

But for this case you don't even have to use flexbox. text-align: center; brings you the same result: http://jsfiddle.net/w9k5y/1/ It's the same idea as Romain had, but you don't necessarily need the extra <div> this time.

score 1 · Answer 2 · answered Oct 29 '13 at 17:33

The best way to do it is to create a div container around your buttons. Set up a variable/fixed width of the container equal at your buttons total width.

Here is an example

HTML

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

CSS

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

Otherwise, there is a wild way to do it.

You can review it here

CSS

#container {
 text-align: center 
}

Align elements in a fieldset using flexbox

2 Answers2