Question

如果您转到http://www.leapfm.com并向下滚动到页脚，您会看到链接位于右下角。

我怎样才能把他们放在中心？

请使用Firebug或inspect元素以便于访问代码。

Answer 1

将li元素正确包含在ul中，并在其上设置margin: 0 auto。

您可以使用li + li:before { content: "|"; }

，而不是使用li元素作为分隔符

Answer 2

所以我会从div class =“footer”开始自上而下，你需要更改或添加这些css属性：

.footer {
   display: block;
   text-align: center;
   width: auto;
}

页脚内链接的li：

.footer li {
   display: inline-block;
}

然后是上面li标签中的a标签：

.footer li a {
   display: inline-block;
   float: none;
}

Answer 3

删除CSS float：右边的类声明。

.footer a {
    float: right; //Remove this
    display: block;
    margin-right: 5px;
    color: black;
}

Answer 4

尝试将<li>标记与<ul>

括起来

然后添加这个css：

.footer {
   display: block;
   text-align: center;
}
.footer ul {
   margin: 0 auto;
}
.footer li {
   float: left;
   display: inline-block;
}

Answer 5

从float:right;移除.footer a，并在li标记为ul

<div class="footer">
    <ul>
          <li><a href="/songs/new">Submit |</a></li>
          <li class="divider"></li>
          <li><a href="/faq">FAQ | </a></li> 
          <li class="divider"></li>
          <li><a href="/contact">Contact Us </a></li>
    </ul>
</div>

Answer 6

首先，您应将这些LI中的每一个都包含在UL或OL中。

与其他人指出的相反，你不需要给UL / OL一个0的自动余量，因为它已经占用了它的整个空间。或者给出一个显示：阻止页脚和文本对齐。所以当你设置text-align：center到li时;他们会神奇地进入元素的中心。 无需居中父元素（ul）。

此外，如果你想以正确的方式做事，摆脱br标签并使用边距或填充来平衡你的布局。

因此;您需要添加到代码中的所有内容是：

ul{
text-align:center;
}

ul li{
display:inline-block;
}

很抱歉把它放在一个答案中。我宁愿对最佳答案发表评论。我没有足够的代表。不是光荣的狩猎！

希望这有帮助

我如何将这些页脚居中？

6 个答案: