Question

尝试将此标记居中时，我做错了什么

我无法将text-align属性应用于锚标记，但我可以将其应用于paragraph，div和其他标记。

我的HTML代码如下

<!DOCTYPE html>
<html>
<head>
        <title>Centering An A Tag</title>
        <link="theme.css" rel="stylesheet" type="text/CSS">
</head>
<body>
    <a href="https://www.example.com" id="Link1">
            Link To example.com
    </a>
</body>
</html>

我的CSS代码如下

#Link1{
    text-align: center;
}

我也不能使用margin-left：auto;保证金右：自动;方法

如果重要的话，我正在使用谷歌浏览器。

Answer 1

你去吧 http://jsfiddle.net/mrodriguezr/AEF3L/

#Link1{
    text-align: center;
    display:block;
}

Answer 2

添加display:block;text-align:center

一定会工作

Answer 3

标签是inline，因此它们只占用其内容，填充，边距等空间。另一方面，BLock级别默认占用其整个父容器的宽度。在您的情况下，我建议您将链接包含在<div/>中并在div上设置text-align: center;。我想你也可以把它放在身体标签中。我会将标记css设置为display: inline-block;，将容器的css设置为display:block; text-align: center;

编辑：请注意，内联元素的设置边距，填充可能不会按预期运行，这就是我建议display: inline-block位的原因。

Answer 4

您还可以通过使用引导网格系统将锚标记居中。这是一个例子。

<div class="row">
    <div class="col-md-12 text-center">
        <a href="#Process" class="btn  btn-sm px-3 mt-5 text-white text-center"
            style="background-color:rgb(50, 75, 114);border-radius:20px;">
            Get Started
        </a>
    </div>
</div>

如何使锚标记居中

尝试将此标记居中时，我做错了什么

4 个答案: