如何使块级链接在div中居中

Question

这看起来似乎非常简单，但出于某种原因，我正在为此而苦苦挣扎。我有一些控制jQuery内容滑块的链接。链接需要在滑块底部居中。链接的文本是通过我正在使用的jQuery插件设置的，所以我只需要使用text-indent: -9999px来隐藏它，而显示一个背景图像。每个链接都设置为区块，宽度和高度均为10px。但是，我不能让它们在div中居中。这是我想做的事情的一个小图表。

|*|

这3个项目符号代表我想要居中的链接。我希望他们居中，无论我是否有2个链接或10个链接。如果我有一组数量的链接，这可能会容易得多，因为我可以创建一个具有固定宽度的父元素，并在其上使用margin:0 auto;。

这是我到目前为止的代码。

HTML..

<div id="pager">
  <a href="#slide1">1</a>
  <a href="#slide2">2</a>
  <a href="#slide3">3</a>
</div>

CSS..

#pager {float:left; width:100%; display: block; text-align: center;}

#pager a {display:block; width:10px; height:10px; float:left; background-image: url(img/pager-off.gif); text-indent: -9999px; background-color: red; background-repeat: no-repeat;}

Answer 1

查看这个jsfiddle

http://jsfiddle.net/h2r6c/

我在链接中添加了页边距，以便查看它们的开始和结束位置。除此之外，去掉你的link CSS中的float:left，你就很好了，只要它们不是块级的。它们需要是display:inline-block才能像你想要的那样并排。

Answer 2

我想要这个？

http://jsfiddle.net/oswaldoacauan/phXvv/

Answer 3

如果你所说的居中是指每一个都居中在容器的中心，因此堆叠在另一个之上，不要浮动。关键是空白处:自动

#pager a {
    display:block; 
    width:10px; height:10px; 
    margin:auto
    background-image: url(img/pager-off.gif); 
    background-color: red; 
    background-repeat: no-repeat;
}

但是，如果您的意思是每个链接是并排的，并且它们作为一组在容器的中间居中，那么在链接上使用display:inline-block，在容器上使用text-align:center：

#pager a {
    display:inline-block; 
    width:10px; height:10px; 
    background-image: url(img/pager-off.gif); 
    background-color: red; 
    background-repeat: no-repeat;
}
#pager{
    text-align:center;