CODEWITHSUNDEEP
htmlcss
FluidMechanics Potential Flows
FluidMechanics Potential Flows

Reputation: 592

centering vertically and horizontally several buttons css

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" class="buttonsWelcome" type="submit" value="HaploSFHI">1</button>
    <button name="button2" class="buttonsWelcome" type="submit" value="tool2">2</button>
    <button name="button3" class="buttonsWelcome" 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;
}

Upvotes: 0

Views: 67

Answers (4)

liam
liam

Reputation: 86

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 class="container">
  <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>

Upvotes: 0

Jobayer Bhuiyan
Jobayer Bhuiyan

Reputation: 1

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

.button{
    top: 50%;
    left: 50%;
    position: fixed;
    transform: translate(-50%,-50%);
    text-align:center;
    display: inline-block;
}
<div class="button">
    <button name="button1" class="buttonsWelcome" type="submit" value="HaploSFHI">1</button>
    <button name="button2" class="buttonsWelcome" type="submit" value="tool2">2</button>
    <button name="button3" class="buttonsWelcome" type="submit" value="tool3">3</button>
</div>

Upvotes: 0

Vishal Kalansooriya
Vishal Kalansooriya

Reputation: 520

Just try this!

.container{   
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.buttonsWelcome {
    width: 50px;
}
<div class="container">
    <button name="button1" class="buttonsWelcome" type="submit" value="HaploSFHI">1</button>
    <button name="button2" class="buttonsWelcome" type="submit" value="tool2">2</button>
    <button name="button3" class="buttonsWelcome" 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!

Upvotes: 1

albjerto
albjerto

Reputation: 571

Try with flexbox:

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

.buttonsWelcome {
    width: 200px;
}

Upvotes: 1

Related Questions