如何使用 CSS 使链接居中答案

【问题标题】：How to center a link using CSS如何使用 CSS 使链接居中
【发布时间】：2013-07-13 16:25:44
【问题描述】：

我很新，并且正在搞乱一些代码（只是 HTML 和 CSS）但是我不能让我的链接像我的文本一样居中？ id 只是为了练习，我知道它们不是必需的。

【问题讨论】：

【解决方案1】：

我用 css 提供了一个解决方案。你可以看看这个链接http://jsfiddle.net/qPAfK/

div {
    width: 100px;
}

div a {
    text-align: center;
    display: block;
    margin: 0 auto;
}

【讨论】：

我正在做 W3 教程，他们会谈论那个“div”功能吗？
你可以把它当作一个容器来对待。或者您可以尝试不使用 div。
a <div></div> 不是函数是 DOM（文档对象建模）的元素，它们在浏览器读取 HTML（超文本标记语言）时呈现，<div></div> 类似于<p></p>、<a></a>、<input/> 等等……因为它们是可以修改、添加或删除的元素，它们帮助我们为页面提供布局。 CSS（级联样式表）让我们为这些元素赋予属性，使我们能够使它们变得漂亮并将它们放置在我们想要的位置。

【解决方案2】：

在你的情况下

 #W3link
    {
    width:100px; /*use your preferred width*/
    margin-left:auto;
    margin-right:auto;
    }

如果您想使用多次，请使用 Class。

【讨论】：

【解决方案3】：

链接是一个内联元素。 Bootstrap 使用center-block 改变内联元素显示：

.center-block {
  display: block;
  margin-right:auto;
  margin-left:auto;
}

然而，当直接应用于链接时，这不起作用，例如：

<a href="#" class="center-block">link</a>

只有当我应用width 样式时它才有效。 20% 在我的页面上效果很好。这是近似居中。我用链接尝试过text-center 很多次，但始终无法成功。令我惊讶的是，单独使用display: block 不适用于margin 居中。必须添加Width。

【讨论】：

【解决方案4】：

这对我来说是这样的：

<div style="text-align:center"><a href="https://stackoverflow.com/"></a></div>

【讨论】：