按钮不会在中间对齐[重复]答案

【问题标题】：Button won't align at the middle [duplicate]按钮不会在中间对齐[重复]
【发布时间】：2021-06-25 15:04:26
【问题描述】：

最近我想在容器中添加一个按钮以及图标和文本。但是按钮不会在中间对齐。我什至不确定图标是否在中间对齐。我尝试调整顶部 % 和左侧 % 但不会移动。

.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>

【问题讨论】：

按钮位于a 标签内。我认为您正在尝试将a 移到中心，对吗？
<button> 在锚点 (<a>) 内是无效的 HTML。您想要一个锚点链接到另一个资源，或者您想要一个按钮（触发脚本）。如果两者都需要，请向锚点添加一个 onlick 触发器。
感谢@tacoshy。我做了并且成功了！

标签： html css

【解决方案1】：

.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>

你可能会尝试删除相对位置，顶部和左侧并使用margin: 0 auto 这样的东西

.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;
}

它应该可以工作，我试过了，它可以工作

【讨论】：

最好添加一个代码 sn-p 表明您的解决方案有效。您可以使用 OP 代码 sn-p 的复制到 anwser 按钮并对其进行编辑。
好吧，他不必更改所有内容，只需删除 3 行并添加一个
他甚至不必这样做。锚点是一个内联元素，可以简单地通过在父元素上使用text-align: center; 来居中
@tacoshy 那是他可以使用的相同的东西，否则保证金没有任何变化
@JvstAlf 照你说的做了，按钮还是不动。