I'm wondering how on earth I can have three buttons on the same line that are then centered on the line, with ample space between the buttons. I've tried inline-flex, I've tried inline-block, all sorts of stuff and I just can't seem to figure it out.

.buttoncontainer {
    box-sizing: border-box;
    width: 300px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
    display: block;
    flex-grow: 2;
}

.inlinebutton {
    vertical-align: middle;
    height:200px;
    width: 350px;
    color: #fff;
    background-image: url('./profile.jpg');
    background-size: cover;
    padding: auto;
    border: 50px;
    border-radius: 5%;
    cursor: pointer;
}

Here's the code I'm working with. I was trying to wrap 3 buttons in the .buttoncontainer div and change each of the individual inline buttons to have different code, but I'm wondering if there's a different way to go about it.

I essentially want:

| _____ _____ _____ | | | | | | | | | | |foo | |bar | |foo2| | | ------ ------ ------ | | |

But I have:

| __________ _____ | | | || || | | | |foo ||bar ||foo2| | | ------------------ | | |

What I want

What I have

(Also sorry if there's something up with the formatting, this is my very first question and I'm not quite sure how to use this site yet)

CodePudding user response：

It's simplest to use display:flex. You can justify the contents to the center and then use the gap property to put plenty of space between the buttons. If you just want the buttons spaced evenly then use justify-content:space-evenly and don't use gap. See the example below

.flex1 {
  display:flex;
  justify-content:center;
  gap:1rem;
}

.flex2 {
  display:flex;
  justify-content:space-evenly;
}

<div class='flex1'>
  <div>
    <button>Button1</button>
  </div>
  <div>
    <button>Button1</button>
  </div>
   <div>
    <button>Button1</button>
  </div>
</div>
<br><!-- Just a bit of space between the two divs-->
<div class='flex2'>
  <div>
    <button>Button4</button>
  </div>
  <div>
    <button>Button5</button>
  </div>
   <div>
    <button>Button6</button>
  </div>
</div>

There's a great resource that explains it here