CODEWITHSUNDEEP
htmlcss
Lutetia87
Lutetia87

Reputation: 49

How to center three buttons side by side

Maybe you can help me, I want to center vertically as well as horizonally the buttons side by side.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Start Page</title>
    <link rel="icon" type="image/ico" href="Logo.ico">
  </head>

  <style>

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

  </style>

<body>

<div class="wrapper">
    <input type="image" src="btn-system-konfiguration-orange.png">
    <input style="padding: 1%" type="image" src="btn-digital-twin-orange.png">
    <input type="image" src="btn-sensor-konfiguration-orange.png">
</div>

</body>

</html>

Do you have any ideas? The solution is probably very simple.

Upvotes: 1

Views: 531

Answers (2)

masilv17
masilv17

Reputation: 139

I believe if you use justify-content: space-around; can help with making them line up horizontally.

 .wrapper {
 display: flex;
 align-items: center;
 justify-content: space-around;
 }

When you try to align it vertically you would need to use flex-direction: column; I am assuming youre doing this when the screen size is phone size so I would add it to a media query with max 400 or something along those lins

  .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  }

Upvotes: 2

Andrei Banica
Andrei Banica

Reputation: 13

add

html,
body {
  height: 100%;
}

the html and body need to have height defined in this case.

Working pen: https://codepen.io/vas131/pen/yLgydxN

Upvotes: 0

Related Questions