Align elements in a fieldset using flexbox [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 6 years ago.

Improve this 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.

Answer 1

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.

Answer 2

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 
}