gpt4 book ai didi

html - 如何使按钮的中心点出现在中心,而不是元素的左侧?

转载 作者:行者123 更新时间:2023-11-28 14:19:51 24 4
gpt4 key购买 nike

我在使按钮出现在屏幕中央时遇到问题。该按钮应该位于屏幕中央,但不知何故我的 CSS 使按钮的中心位于左上角。有谁知道为什么?更多细节:我希望它是这样的: how it should look

但它看起来像这样: how it looks

有人可以帮忙吗?这是代码:

html, body {margin: 0; height: 100%; overflow: hidden}
img
{
max-width: 100%;
height: auto;
position: relative;
top: 33%;

}
.obj1
{
width: 20%;
height: 100%;
background: rgb(136, 44, 44);
float:left;
position: relative;
}
.obj2
{
width: 20%;
height: 100%;
background: rgb(255, 255, 255);
position: relative;
float:left;
}
.obj3
{
width: 20%;
height: 100%;
background: rgb(0, 0, 0);
position: relative;
float:left;
}
.obj4
{
width: 20%;
height: 100%;
background: rgb(42, 75, 148);
position: relative;
float:left;
}
.obj5
{
width: 20%;
height: 100%;
background: rgb(72, 114, 48);
position: relative;
float:left;
}
.obj6
{
width: 20%;
height: 100%;
background: rgb(119, 39, 112);
position: relative;
float:left;
}
#show-more
{
background: #1594e5;
color: #fff;
font-family: calibri;
display: block;
width: 140px;
font-size: 24px;
text-transform: uppercase;
padding: 10px;
text-align: center;
margin: 20px auto;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
<body>

<div class="obj1">

</div>
<div class="obj2">

</div>
<div class="obj3"></div>
<div class="obj4"></div>
<div class="obj5"></div>
<a id="show-more">Show More</a>

</body>

最佳答案

使用绝对位置和 top/left 指向元素的左上角。另外使用 transform: translate(-50%, -50%); 将按钮移动到其高度/宽度的 50% 的顶部和左侧

关于html - 如何使按钮的中心点出现在中心,而不是元素的左侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55347913/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com