-2

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)

crypticazure
  • 3
  • 3
  • [**ADD** THE HTML in your snippet !](https://stackoverflow.com/help/mcve) – Mister Jojo Aug 28 '22 at 23:00
  • have a look at `display: flex`, `justify-content: center`, `align-items:center` – Cornel Raiu Aug 28 '22 at 23:02
  • Does this answer your question? [How do I center content in a div using CSS?](https://stackoverflow.com/questions/4374650/how-do-i-center-content-in-a-div-using-css) – Cornel Raiu Aug 28 '22 at 23:02
  • You were nearly there with the display: inline-flex. Had you used display: flex you'd have probably nailed it. I've put an example below. – Adam Aug 28 '22 at 23:26

1 Answers1

1

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

Adam
  • 5,495
  • 2
  • 7
  • 24