如何在CSS中居中锚点元素？

Question

我想让我的链接在屏幕水平方向上居中，我该如何做到这一点？

<a href="http://www.example.com">example</a>

- Shai UI

---

我知道这是一个老问题，但是在Chrome浏览器中，这些方法单独使用都没有真正起作用。真正解决问题的是"text-align:center & display-block"。希望能对你有所帮助。 - lsrom

Answer 1

在父元素的样式属性中添加 text-align CSS 属性。

例如：

<div style="text-align:center">
  <a href="http://www.example.com">example</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</div>​

或使用类（推荐）

<div class="my-class">
  <a href="http://www.example.com">example</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</div>​

.my-class {
  text-align: center;
}

我不知道。这是一段没有需要翻译的内容的HTML代码。

.my-class {
  text-align: center;
  background:green;
  width:400px;
  padding:15px; 
}
.my-class a{text-decoration:none; color:#fff;}

<!--EXAMPLE-ONE-->
<div style="text-align:center; border:solid 1px #000; padding:15px;">
  <a href="http://www.example.com">example</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</div>​

<!--EXAMPLE-TWO-->
<div class="my-class">
  <a href="http://www.example.com">example</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</div>​

---

问: 为什么text-align样式没有应用于a元素，而是应用于div元素？

答: text-align样式描述了如何在块级元素中对内联元素进行对齐。在这种情况下，div是一个块级元素，它的内联内容是a元素。如果将text-align样式应用于伴随其他文本的a元素，这样做就毫无意义了。

<div>
  Plain text is inline content. 
  <a href="http://www.example.com" style="text-align: center">example</a> 
  <span>Spans are also inline content</span>
</div>

尽管这里有换行符，但div的所有内容都是内联内容，因此会产生类似以下的内容:

“纯文本是内联内容。 示例 跨度也是内联内容。”

如果应用了text-align属性，很难理解在这种情况下“示例”将如何显示。

- JaredMcAteer

---

谢谢您展示了两种方法。我需要这个方法用于一个非常受限制的专有应用程序，该应用程序具有有限的HTML框功能，我无法引用CSS :( 因此必须使用不推荐的方法。 - Davos

"text-align" CSS 属性描述了内联内容在块级元素中的对齐方式。在这种情况下，div 是块级元素，a 是内联内容。 - JaredMcAteer

如果你没有看到任何变化，将"display: inline-block;"添加到上面的CSS中应该有所帮助。 - rychrist88

我认为没有充分的理由就轻易修改显示属性并不是一个好主意。 - JaredMcAteer

@JaredMcAteer 将 .my-class { ... } 改为 div, a {...} 并保持相同的内容，这个修改是有效的吗？ - Manuel Jordan

语义上完全不同。div, a {...}将会将样式规则应用于您代码中的所有 div 和 anchor 元素，而不考虑结构。 - JaredMcAteer

Answer 2

像这样编写：

<div class="parent">
 <a href="http://www.example.com">example</a>
</div>

CSS

.parent{
  text-align:center
}

- sandeep

Answer 3

有两个选项，它们具有不同的用途：

HTML：

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

CSS：

.example { text-align: center; }

或者：

.example { display:block; width:100px; margin:0 auto;}

- bookcasey

---

有哪些不同的用途？ - corbin

Answer 4

尝试：

margin: 0 auto;
display: table

- Eric K

---

在许多情况下，这是最好的答案，因为不需要额外的标记（如父级 div）。 - dash

它帮助了我。我不想要一个容器。 - user3808307

Answer 5

尝试在周围包裹一个div，并为div添加这些样式：

 width: 100%; 
 text-align: center;

- clem

Answer 6

<span style="text-align:center; display:block;">
<a href="http://news.awaissoft.com">Awaissoft</a>
</span>

- Awaissoft

Answer 7

默认情况下，锚点是以行内方式呈现的，因此请在其最近的块级祖先上设置text-align: center;。

- Quentin

Answer 8

我认为您无法使用内联元素（如锚点、span）来实现此功能。但是，要使其正常工作，您需要将显示设置为块级元素。

<a href="http://www.example.com" style="text-align:center;display:block;">example</a>

- VJAI

Answer 9

有很多种方法。

<!-- Probably the most common: -->
<div style="text-align: center;"><a href="...">Link</a></div>

<!-- Getting crafty... -->
<a href="..." style="display: block; text-align: center;">Link</a></div>

可能还有其他方法，但这三种可能是最常见的。

- Niet the Dark Absol

Answer 10

您可以尝试这段代码：

/**code starts here**/

a.class_name { display : block;text-align : center; }

- Saravanan Kasi