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

Question

我只想把我的锚水平放在屏幕中间,我怎么能这样做？

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

Answer 1

将text-aligncss属性添加到其父样式属性

例如:

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

即使strre是换行符,所有内容div都是内联内容,因此会产生如下内容:

纯文本是内联内容.示例 Spans也是内联内容

如果将text-align属性应用于它,那么在这种情况下如何显示"示例" 并不是很有意义.

Answer 2

像这样写:

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

CSS

.parent{
  text-align:center
}

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

Answer 4

尝试环绕div并将这些样式添加到div：

 width: 100%; 
 text-align: center;

Answer 5

尝试

margin: 0 auto;
display:table

希望能帮助别人。