Button won't align at the middle

Question

Recently I wanted to add a button inside a container along with icons and a text. But the button wont align in the middle. I'm not even sure if the icon is align at the middle. I tried adjusting the top % and left % but won't move.

.container {
  position: relative;
  width: 550px;
  height: 350px;
  background-color: rgba(255, 255, 255, 0.7);
  margin: 20px auto;
  border-radius: 15px;
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.6);
}

.container h1 {
  margin: 0;
  padding: 0;
  font-size: 30px;
  text-align: center;
  position: relative;
  top: 20%;
  transform: translateY(-80%);
}

.icon {
  width: 40%;
  height: 40%;
  margin: 0;
  left: 30%;
  top: 15%;
  transform: translateX(-70%, -80%);
  position: relative;
}

.button {
  background-color: rgba(231, 231, 231, 1);
  border: none;
  padding: 12px 25px;
  margin: 0;
  text-align: center;
  display: block;
  font-size: 16px;
  color: black;
  border-radius: 12px;
  position: relative;
  top: 50%;
  left: 50%;
}

<div class="container">
  <h1>Selamat Datang ke Kuiz FizikMudah!</h1>
  <img src="https://via.placeholder.com/500x400.png" class="icon">
  <a href="index.php"><button class ="button" type="button">Masuk</button></a>
</div>

Button is inside an `a` tag. I think you are trying to move the `a` to the center, right? — Zander, Mar 29 '21 at 15:12

JvstAlf · Answer 1 · 2021-03-29T15:21:32.323

0

.container {
position: relative;
width: 550px;
height: 350px;
background-color: rgba(255, 255, 255, 0.7);
margin: 20px auto;
border-radius: 15px;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.6);
}

.container h1 {
margin: 0;
padding: 0;
font-size: 30px;
text-align: center;
position: relative;
top: 20%;
transform: translateY(-80%);

}

.icon {
width: 40%;
height: 40%;
margin: 0;
left: 30%;
top: 15%;
transform: translateX(-70%,-80%);
position: relative;
}

.button {
background-color: rgba(231, 231, 231, 1);
border: none;
padding: 12px 25px;
margin: 0;
text-align: center;
display: block;
font-size: 16px;
color: black;
border-radius: 12px;
margin: 0 auto;
}

<?PHP include('header.php');?>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
    <h1>Selamat Datang ke Kuiz FizikMudah!</h1>
    <img src="images/fizikicon.png" class="icon">
    <a href="index.php"><button class ="button" type="button">Masuk</button></a>
</div>
</div>


</body>
</html>

well you might try to delete position relative, top and left and use margin: 0 auto so something like

.button {
background-color: rgba(231, 231, 231, 1);
border: none;
padding: 12px 25px;
margin: 0;
text-align: center;
display: block;
font-size: 16px;
color: black;
border-radius: 12px;
margin: 0 auto;
}

it should work, i tried it and it works

edited Mar 29 '21 at 15:21

answered Mar 29 '21 at 15:16

JvstAlf

83
1
9

preferably add a code snippet showing that your solution works. You can use the copy to anwser button of the OP's code snippet and edit it. – tacoshy Mar 29 '21 at 15:17
well he doesnt have to change everything, just delete 3 lines and add one – JvstAlf Mar 29 '21 at 15:18
he doesnt even has to do this. an anchor is an inline element and can be centered simply by using `text-align: center;` on the parent – tacoshy Mar 29 '21 at 15:30
@tacoshy thats the same thing he could use that or margin nothing changes – JvstAlf Mar 29 '21 at 15:32
@JvstAlf did what you told, the button still doesn't move. – North Mar 29 '21 at 17:23
@tacoshy did that too, still didn' t work – North Mar 29 '21 at 17:26

Button won't align at the middle

1 Answers1