html - 水平居中三个 anchor 标记之一

Question

我在页脚中有 3 个链接。它们应该位于左、中和右。侧面的链接在侧面有一些边距。如何使中间链接居中？如果有必要，我可以将我的 html 更改为 UL。

到目前为止，这是我的代码:

<footer>
        <a href="#">Link1</a>
        <a href="#" class="link2">Link2</a>
        <a href="#" class="link3">Link3</a>
</footer>

---

footer {
    height: 50px;
    line-height: 50px;
    background-color: #ccc;
    text-transform: uppercase;
}

footer a {
  margin: 0 20px;
}

.link2 {
  //This should be centered
}

.link3 {
  float: right;
}

Codepen 链接:http://codepen.io/anon/pen/FgpAq

Answer 1

您可以将页脚文本对齐到中心并 float 第一个和最后一个链接。我使用了 .link1 和 .link3 但你可以使用 footer a:first-child 和 footer a:last-child 如果您不关心所有浏览器都不支持伪类。

<footer>
    <a href="#" class="link1">Link1</a>
    <a href="#" class="link2">Link2</a>
    <a href="#" class="link3">Link3</a>
</footer>

CSS

footer {
  text-align:center;
    height: 50px;
    line-height: 50px;
    background-color: #ccc;
    text-transform: uppercase;
}

footer a {
  margin: 0 20px;
}

.link1 {
  float:left;
}

.link3 {
  float: right;
}