Question

继承我的问题：我想以＆lt; a＆gt;为中心标签内的＆lt; div＆gt;已经应用了text-align。我找到了一种方法来解决我的问题，包括＆lt; a＆gt;用'span'标签标记。有没有更好的方法来做到这一点，即没有额外的＆lt; span＆gt;标记

这是一个描述我在说什么的小提琴：http://jsfiddle.net/8VhQg/3/

正如你所看到的，我已经解决了底部的问题，但它与＆lt; a＆gt;的关系是什么？标签，默认情况下不会让它工作？即使更换显示器似乎也不起作用：

a {
    text-align: center;
    display: inline;
}

a {
    text-align: center;
    display: inline-block;
}

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

我不想从＆lt; div＆gt;中删除text-align，我很好奇为什么＆lt; a＆gt; tag更喜欢父CSS而不是自己的ID。

提前致谢。

Answer 1

由于您重复使用ID，您发布的小提琴无效，您应该使用classes。

但是，除此之外，使锚点居中对齐的最简单方法是将其设置为display: block（这意味着它会自动占用任何可用的水平空间），然后{{1} }。

因此，你得到了这个：

text-align: center

Answer 2

创建3个类。它们必须显示为块以添加对齐。

.left{ text-align: left; display: block; }
.center{ text-align: center; display: block; }
.right{ text-align: right; display: block; }

然后将其直接应用于A标签

<a href="#" class="left">this is left</a>
<a href="#" class="center">this is center</a>
<a href="#" class="right">this is right</a>

我认为这是最简单的

Answer 3

您忘了将课程center和left提供给<a>。

ID必须相同。改为使用类。

更改

<h2>Align Links</h2>
<a href="" id="right">Right Align Link</a><br/>
<a href="" id="right">Center Align Link</a><br/>
<a href="" id="right">Left Align Link</a><br/>

到

<h2>Align Links</h2>
<a href="" class="right">Right Align Link</a><br/>
<a href="" class="center">Center Align Link</a><br/>
<a href="" class="left">Left Align Link</a><br/>

Updated fiddle here.

如何对齐<a> tag in the center of a <div> that already has text-align applied to it?</div></a>

3 个答案: