我无法将按钮居中，也不知道为啥[重复]
Posted
技术标签:
【中文标题】我无法将按钮居中，也不知道为啥[重复]【英文标题】：I cannot center my button and don't know why [duplicate]我无法将按钮居中，也不知道为什么[重复] 【发布时间】：2021-09-17 15:20:00 【问题描述】：我试图在我的 div 的中心放置一个按钮，但我无法将所有其他内容都居中。
我的代码：
.middle
width: 100%;
height: auto;
text-align: center;
position: relative;
.middle section
padding: 18vh 6%;
line-height: 0.5;
color: #EE6352;
font-weight: 400;
font-size: calc(16px + 3vw);
.middle ul
text-align: left;
.middle li
font-size: calc(12px + 2vw);
line-height: 1.25;
color: #2A2D34;
.middle p
font-size: calc(14px + 2.4vw);
font-weight: 400;
color: #2A2D34;
.upbutton
padding: 10px;
background: #1ac6ff;
border-radius: 50%;
border-style: none;
cursor: pointer;
position: absolute;
top: 0px;
transition: background 0.3s;
box-shadow: 2px 2px 5px rgba(102, 102, 102, 0.5);
.upbutton img
width: 25px;
height: 25px;
.upbutton:hover
background: #00ace6;
-webkit-transform: scale(0.94);
-ms-transform: scale(0.94);
transform: scale(0.94);
.upbutton:active
background: #0086b3;
<a id="middle">
<div class="middle">
</a>
<section>
<a href="#top"><button class="upbutton"><img src="img/arrow.png"></button></a>
<h1>content</h1>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<p>...and more</p>
</section>
</div>我也搜索了这个问题并尝试将其放入 .upbutton 类中：
margin:0;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
它使我的按钮居中。但是当我悬停时，它不再居中。
我不知道为什么我对此有点陌生。任何人都可以解释并帮助我，tks很多！
【问题讨论】：
您的 html 错误。 在 内开始，因此它应该在 内关闭。如果输入错误，请修复并更新问题。 【参考方案1】：记得添加一个变换： translateX(-50%);在按钮的 :hover 选择器上，这样它就不会返回。如果您在悬停时更改变换属性，它会覆盖现有的属性，因此它会返回到 translateX(0)
.upbutton:hover
background: #00ace6;
-webkit-transform: translateX(-50%) scale(0.94);
-ms-transform: translateX(-50%) scale(0.94);
transform: translateX(-50%) scale(0.94);
【讨论】：
我想我只需要将 translateX(-50%) 放到悬停中，而不是转换，所以它不起作用:(。顺便说一句，非常感谢 :D【参考方案2】：<head>
<style>
.middle
width: 100%;
height: auto;
text-align: center;
position: relative;
.middle section
padding: 18vh 6%;
line-height: 0.5;
color: #EE6352;
font-weight: 400;
font-size:calc(16px + 3vw);
.middle ul
text-align: left;
.middle li
font-size: calc(12px + 2vw);
line-height: 1.25;
color: #2A2D34;
.middle p
font-size: calc(14px + 2.4vw);
font-weight: 400;
color: #2A2D34;
.upbutton
padding: 10px;
background: #1ac6ff;
border-radius: 50%;
border-style: none;
cursor: pointer;
position: absolute;
top:50%;
left:50%;
transition: background 0.3s;
box-shadow: 2px 2px 5px rgba(102, 102, 102, 0.5);
.upbutton imgwidth: 25px;height: 25px;
.upbutton:hover background: #00ace6;
-webkit-transform: scale(0.94);
-ms-transform: scale(0.94);
transform: scale(0.94);
.upbutton:activebackground: #0086b3;
</style>
</head>
<a id="middle"><div class="middle"></a>
<section>
<a href="#top"><button class="upbutton"><img src="https://png.pngtree.com/png-vector/20190419/ourmid/pngtree-vector-up-arrow-icon-png-image_956434.jpg"></button></a>
<h1>content</h1>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<p>...and more</p>
</section>
</div>在本例中，您可以只使用'position': absolute 和top:50%,left:50%
【讨论】：
我试图把'left: 50%'因为我想把它放在上面，但它并没有改变任何东西，你可以运行代码sn-p看看或者你可以在这里看到：@ 987654321@【参考方案3】：如果您想将其居中，只需添加
顶部：50%； .upbutton 类的属性
【讨论】：
它仍然不起作用，但感谢您的帮助:( 您可以在上传的图片中看到按钮没有居中 我认为您需要先将其父级居中，以便将其居中在页面的正中间！检查父 css。 在图片上画出你要准确居中的位置【参考方案4】：尝试直接在 HTML 中进行。编辑：尝试使用 JS。
<center><button onclick = "goToTop()" id = "buttonId"><img src="img/arrow.png"></img></button></center>
<script>
function goToTop()
var currentLink = window.location.href;
window.location = currentLink+'#top';
</script>
如果这对您不起作用，请告诉我，我会尽力解决。另外，如果这对您有用，请接受。它适用于我的 Chrome。
【讨论】：
谢谢你帮助我，但还是不行:( 等等——我才意识到为什么它不起作用。我刚刚更新了我的 sn-p @tomdapchai 嗯，我不认为以上是关于我无法将按钮居中，也不知道为啥[重复]的主要内容，如果未能解决你的问题，请参考以下文章
使用 flexbox 使文本居中，然后将剩余 50% 的按钮居中 [重复]
尽管应用了正确的 CSS 规则，但按钮没有水平居中 [重复]