Is there a way to center a button without making a new line?-CodePudding

I searched all over stackoverflow, and all the answers returned this result:

Create post and report post used to be on the same line, and worked fine, but when I added the Back button, everything is on a different line.

Here is how I centered the button:

I wrapped the button with a DIV tag, and centered the DIV, which got the button in the center, but not on the same line as create post and report post.

I also use an A tag over the DIV, so it redirects to the home page on button click which works fine.

Any ideas of how to get the button itself on the same line as Create post and Report post, while keeping it centered?

By the way, here is the before and after:

Before:

After:

Edit:

As カメロン has pointed out in the comments, I forgot to add code snippets, so here they are:

The button that is causing issues:

<a href="/">
  <div style="display: flex; justify-content: center;">
    <button style="color: black; font-weight: bold; box-shadow: 0px 0px 15px 0px #000000; border-radius: 7px; stroke-width: 0px; padding: 20px 50px; background-color: grey;">Back</button>
  </div>
</a>

If more code is needed, please tell me in the comments :)

Edit 2:

Here are the three buttons code:

<a href="/post/create">
      <button
          style="color: black; font-weight: 1000; box-shadow: 0px 0px 15px 0px #ff0000; border-radius: 7px; stroke-width: 0px; padding: 20px 50px; background-color: rgb(0, 225, 255);">Create Post</button>
  </a>
  
  <a href="/">
            <div style="display: flex; justify-content: center; ">
            <button style="color: black; font-weight: bold; box-shadow: 0px 0px 15px 0px #000000; border-radius: 7px; stroke-width: 0px; padding: 20px 50px; background-color: grey;">Back</button>
            </div>
        </a>
  <a href="/post/report">
    <button
        style="color: rgb(238, 255, 0); font-weight: 1000; box-shadow: 0px 0px 15px 0px #ff0000; box-shadow: 0px 0px 30px 0px #eeff00; border-radius: 7px; stroke-width: 0px; padding: 20px 50px; background-color: rgb(255, 0, 0); float: right;">Report post</button>
</a>

CodePudding user response：

if you add space-between you will solve the bug

and write it in the parent, 1 time for all elements inside

details:

<div  style="display: flex; justify-content: space-between;">
  <!-- left -->
  <button>hello 1</button>
  <!-- center -->
  <button>hello 2</button>
  <!-- right -->
  <button>hello 3</button>
</div>