如何使用CSS居中链接

Question

我刚接触it技术，正尝试写一些代码（只有HTML和CSS），但是我的链接无法像文本一样居中显示？ 这里的id只是为了练习，我知道它们不是必需的。

http://pastebin.com/kYyR6WUx

- Isaiah Young

Answer 1

我用CSS提供了一个解决方案。您可以查看此链接http://jsfiddle.net/qPAfK/

div {
    width: 100px;
}

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

- seanxiaoxiao

---

我正在学习W3教程，他们会讲解“div”函数吗？ - Isaiah Young

你可以把它当作一个容器来处理。或者你可以尝试不使用 div。 - seanxiaoxiao

一个 <div></div> 不是一个函数，它是 DOM（文档对象模型）的一个元素，当浏览器读取 HTML（超文本标记语言）时渲染出来。<div></div> 与 <p></p>、<a></a>、<input/> 等类似，它们都是可以被修改、添加或删除的元素，帮助我们给页面布局。CSS（层叠样式表）让我们为这些元素提供属性，使我们能够美化它们并将它们放置在我们想要的位置。 - Samuel Lopez

Answer 2

链接是一个内联元素。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。

- user3245800

Answer 3

在您的情况下

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

如果您想要多次使用，请使用类。

- sun

Answer 4

这是我的解决方案：

- Ed 42