如何在CSS中居中对齐链接

Question

如何在CSS中居中对齐链接列表?

这类似于这个问题:如何在CSS中居中对齐文本?，除了使用链接而不是文本。当我使用链接而不是文本时，那里的答案(http://jsfiddle.net/L4pzm/)不工作。

他们是这样做的:

.center-justified {
margin: 0 auto;
text-align: justify;
width: 30em;
}

下面是我创建的小提琴:http://jsfiddle.net/hsm4w0p5/

<div class="center-justified"><p>
<a href="1">First </a><a href="2">Second</a><br>
<a href="3">Third <a href="4">Fourth </a><a href="5">Fifth</a></p>
</div>

正如您在上面的示例中看到的，链接没有对齐。我想让单词"Second"向右对齐以匹配单词"Fifth"

Answer 1

我不认为这是可能的使用text-align: justify，但可以使用flexbox做类似的事情:

Html:

<div class="center-justified">
    <div class="row">
        <a href="1">First </a><a href="2">Second</a>
    </div>
    <div class="row">
        <a href="3">Third <a href="4">Fourth </a><a href="5">Fifth</a>
    </div>
</div>

CSS:

.center-justified {
    margin: 0 auto;
    width: 30em;
}
.row {
    display: flex;
    justify-content: space-between;
}
a {
    text-decoration: none;
}

http://jsfiddle.net/czcegf2d/1/

一定要检查flexbox的浏览器兼容性(这是相当不错的这些天)，看看它符合您的需求。http://caniuse.com/壮举= flexbox

Answer 2

如果你不需要动态，你可以使用:n -child(n) CSS选择器来定位每个链接，使其在。center-justified容器内左右浮动。

:

.center-justified a:nth-child(2n) {float:right}