按钮不会在中间对齐[重复]
Posted
技术标签:
【中文标题】按钮不会在中间对齐[重复]【英文标题】：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。我做了 并且成功了！
【参考方案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 照你说的做了，按钮还是不动。以上是关于按钮不会在中间对齐[重复]的主要内容，如果未能解决你的问题，请参考以下文章