中心标记适用于 link 但不适用于 CSS 或对齐属性

Question

我正在尝试将作为 <a> 标记的按钮居中。然而，唯一有用的是 <center> 标签。我试过使用 <a style="text-align: center">Button</a> 和 <a align="center">Button</a>，但两者中的 none 有效。为什么只有中心标签有效？

我的CSS是这样的：

.btn {
    color: white;
    background-color: orange;
    padding: 5px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    text-decoration: none;
    transition: 200ms all;
}

.btn:hover {
    background-color: #FFC964;
    color: white;
    cursor: pointer;
}

HTML:

<a href="http://example.com" class="btn">Button</a>

Answer 1

你的 a 元素有 .btn class 吗？

尝试将此 CSS 添加到其中：

display:block;
margin:0 auto;

否则，请为我们创建一个重现问题的 jsfiddle。您没有显示整个 CSS 和标记。

Answer 2

<center> 标签已弃用，很可能会在所有浏览器中被删除。 <a> 标签本质上是内联的，因此应该为它的父块元素提供 text-align: center：

.make-center {text-align: center;}

<div class="make-center">
  <a href="#">I am a link</a>
</div>

在上面的代码中，<div class="make-center"> 标签充当 <center> 标签。

中心标记适用于 link 但不适用于 CSS 或对齐属性

Center tag works on link but not CSS or align attribute

html

css

centering