HTML 锚按钮问题

Question

我正在尝试在我的网站底部创建一个按钮。

这是我的 HTML

<center><a href="#" id="btn1" class="btn1">
    View 
</a></center>

这是我的 CSS。

.btn1 {
    margin: 60px 0px 60px 0px;
    color: white;
    background: #ED7836;
    padding: 10px 30px 10px 30px;
    text-decoration: none;
    font-size: 20px;
}

当我尝试创建按钮时，它似乎忽略了我设置的边距并在页面的最底部对齐。

Bottom of page

当我尝试将其定位设置为绝对定位并放置 left: 50% 时，它似乎将自己定位在一个不在中心的奇怪位置。

.btn1 {
    position: absolute;
    left: 50%;
    margin: 60px 0px 60px 0px;
    color: white;
    background: #ED7836;
    padding: 10px 30px 10px 30px;
    text-decoration: none;
    font-size: 20px;
}

Doesn't align in the centre

谢谢。

Answer 1

您必须添加 transform: translate(-50%, 0%); 才能使其准确居中。

.btn1 {
    position: absolute;
    left: 50%;
    margin: 60px 0px 60px 0px;
    color: white;
    background: #ED7836;
    padding: 10px 30px 10px 30px;
    text-decoration: none;
    font-size: 20px;
}

解释：

没有出处，就像你说的那样（其实应该是这样的） https://jsfiddle.net/z5qo8yaj/

您需要使用平移功能将其沿原点移动（移动其长度的一半）添加 translate 后 https://jsfiddle.net/h1qzdoLm/

HTML 锚按钮问题

HTML Anchor Button Problems

html

css

anchor