如何在CSS中定位锚点元素？ [英] How do I center an anchor element in CSS?

问题描述

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

I just want to have my anchor in the middle of the screen horizontally, how might I do this?

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

推荐答案

添加 text-align

Add the text-align css property to its parent style attribute

例如

<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>​

b
$ b

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

---

Q：为什么 text-align 样式不能应用于 a div ？

---

Q: Why doesn't the text-align style get applied to the a element instead of the div?

A： > text-align 样式描述 inline 如何在块元素中对齐。在这种情况下， div 是一个块元素，它的内联内容是 a 。为了进一步探讨这一点，考虑当 text-align 样式应用于 a

A: The text-align style describes how inline content is aligned within a block element. In this case the div is an block element and it's inline content is the a. To further explore this consider how little sense it would make to apply the text-align style to the a element when it is accompanied by more text

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

即使threre是换行符，这里的所有内容 div 是内联内容，因此会产生如下内容：

Even though threre are line breaks here all the contents of div are inline content and therefore will produce something like:

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

它如果 text-align 属性被应用，它将如何显示在这种情况下如何显示

It doesnt' make much sense as to how "example" in this case would be displayed if the text-align property were to be applied it it.

这篇关于如何在CSS中定位锚点元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！