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

您可以将页脚文本对齐到中心并浮动第一个和最后一个链接。我使用了.link1和.link3，但如果您不关心所有浏览器都不支持pseduo类，则可以使用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;
}

Answer 2

最简单的答案，提前知道会有多少链接：

footer {
    text-align: center;
}

footer a:first-child {
    float: left;
}

footer a:last-child {
    float: right;
}

JS Fiddle demo

这会将指向其父元素中心的所有链接对齐，然后将:first-child移到左侧，将:last-child移到右侧。

Answer 3

尽管这可能不是一个好习惯，但你可以这样做：

.link2 {
    margin-left: 800px;
}

使用此方法可让您随意使用链接并随意移动。

Answer 4

还有更多选择：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
footer {
    height: 50px;
    line-height: 50px;
    background-color: #ccc;
    text-transform: uppercase;
    padding: 0 20px;
}

footer a {
    margin: 0;
    display: block;
    float: left;
    width: 33%;
}

.link2 {text-align: center; width: 34%;}
.link3 {text-align: right;}


</style>


</head>
<body>

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

</body>
</html>

和

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
footer {
    height: 50px;
    line-height: 50px;
    background-color: #ccc;
    text-transform: uppercase;
    padding: 0 20px;
  display: table;
  table-layout: fixed;
  width: 100%;
}

footer a {
    margin: 0;
    display: table-cell;
    width: 33%;
}

.link2 {text-align: center; width: 34%;}
.link3 {text-align: right;}


</style>


</head>
<body>

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

</body>
</html>

水平居中三个锚标签中的一个

4 个答案: