centering vertically and horizontally several buttons css-CodePudding

I wanted to center both vertically and horizontally my buttons so I got inspired by this tutorial. However, I think, because of position: fixed; my three buttons are on top of each other, and I would like them to be next to each other (but still centered horizontally). I sort of guess why this wouldn't work (because I place them all at the same place) but don't really know how to fix this. Adding display: inline; didn't help.

I also saw this stackoverflow post so I tried a second .css but this still didn't work (this time the buttons were on the top left, but not on top of each other).

My HTML code is the following:

<body>
    <button name="button1"  type="submit" value="HaploSFHI">1</button>
    <button name="button2"  type="submit" value="tool2">2</button>
    <button name="button3"  type="submit" value="tool3">3</button>
</body>

and my first css:

.buttonsWelcome {
    width: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline;
    position: fixed;
}

and my second css:

.buttonsWelcome {
    width: 200px;
    vertical-align: middle;
    text-align:center;
    display: inline-block;
}

CodePudding user response：

Just try this!

.container{   
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.buttonsWelcome {
    width: 50px;
}

<div >
    <button name="button1"  type="submit" value="HaploSFHI">1</button>
    <button name="button2"  type="submit" value="tool2">2</button>
    <button name="button3"  type="submit" value="tool3">3</button>
</div>

If you want you can also change the .container to body in CSS and remove the above div in HTML code but it is good to use a separate block to add them otherwise all of your code will be centered when you use it with your body tag.

Moreover, there are a lot of ways to do this and this is only a one method of them. Look at this W3School CSS Layout page if you want to know more about how to align items to center

Thanks and best regards!

CodePudding user response：

Try with flexbox:

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.buttonsWelcome {
    width: 200px;
}

CodePudding user response：

.buttonsWelcome {
    width: 50px;
    display: inline;
}

.button{
    top: 50%;
    left: 50%;
    position: fixed;
    transform: translate(-50%,-50%);
    text-align:center;
    display: inline-block;
}

<div >
    <button name="button1"  type="submit" value="HaploSFHI">1</button>
    <button name="button2"  type="submit" value="tool2">2</button>
    <button name="button3"  type="submit" value="tool3">3</button>
</div>

CodePudding user response：

You can achieve this using Flexbox with minor updates to your HTML mark-up. Use 100vh to achieve full height of the page across devices.

.container {   
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div >
  <button name="button1" type="submit" value="HaploSFHI">1</button>
  <button name="button2" type="submit" value="tool2">2</button>
  <button name="button3" type="submit" value="tool3">3</button>
 </div>