如何使锚标签居中？答案

【问题标题】：How do you center an anchor tag?如何使锚标签居中？
【发布时间】：2020-09-15 14:34:27
【问题描述】：

试图将这个标签居中时我做错了什么？

我无法将 text-align 属性应用于锚标记，但我可以将其应用于段落、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;边距右：自动；方法。

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

【问题讨论】：

默认是内联元素。你可以给它display: block 或者把它包裹在一个居中对齐的容器中。但是……您不想删除您的帐户吗？这可能会破坏提问的意义。
正如@false所说-JSFiddle Example
一篇不错的小文章，描述了内联元素和块元素在居中方面的区别：forum.webflow.com/t/how-to-center-elements/2632
谢谢，是的，我想创建一个新帐户，但由于我还没有创建一个新帐户，所以我只是使用了这个
这能回答你的问题吗？ how to center an inline div using css?

标签： html css

【解决方案1】：

给你 http://jsfiddle.net/mrodriguezr/AEF3L/

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

【讨论】：

【解决方案2】：

添加display:block;text-align:center

一定会成功

【讨论】：

【解决方案3】：

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

编辑：请注意，设置内联元素的边距、填充可能与您预期的不同，这就是我建议使用display: inline-block 位的原因。

【讨论】：

【解决方案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>

【讨论】：