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

Question

我只想让我的锚点水平放置在屏幕中间，我该怎么做？

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

原文由 Shai UI 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;
}

---

请参见下面的工作示例：

 .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 样式描述了 inline 内容如何在 block 元素中对齐。在这种情况下， 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 的所有内容都是内联内容，因此会产生如下内容：

纯文本是内联内容。 示例 Span 也是内联内容

如果要应用 text-align 属性，那么在这种情况下如何显示“示例”没有多大意义。

原文由 JaredMcAteer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

像这样写：

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

CSS

 .parent{
  text-align:center
}

原文由 sandeep 发布，翻译遵循 CC BY-SA 3.0 许可协议