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

我想要这个吗？

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

Answer 2

看看这个jsfiddle

http://jsfiddle.net/h2r6c/

我在链接上添加了一个边距，只是看看它们的起点和终点。除此之外，摆脱链接CSS中的float:left并且你很好，只要它们不是块级别。他们需要display:inline-block和你一样并排。

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：集中在容器上：

#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;

如何在div中居中块级链接

3 个答案: