Question

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

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

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的所有内容都是内联内容，因此会产生如下内容：

纯文本是内联内容。 example 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

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

Answer 6

默认情况下，锚呈内联呈现，因此在其最近的祖先上设置text-align: center;，然后呈现为块。

Answer 7

有很多方法。

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

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

Answer 8

尝试

margin: 0 auto;
display:table

希望能帮助别人。

Answer 9

您可以尝试以下代码：

/**code starts here**/

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

Answer 10

style="margin:0 auto; width:auto;"试试。

Answer 11

我认为你不能使用像anchor，span这样的内联元素来做到这一点。但要使其工作，您必须将显示设置为阻止。

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

Answer 12

css不能直接应用于锚标记的对齐方式。应将css（text-align：center;）应用于父div /元素，以使对齐效果发生在锚标记上。

Answer 13

只需将它放在中心标签之间：

<center>><Your text here>></center>

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

13 个答案: