1

这看起来非常简单，但由于某种原因，我正在为此苦苦挣扎。我有一些控制 jQuery 内容滑块的链接。链接需要在滑块底部居中。链接的文本是通过我正在使用的 jQuery 插件设置的，所以我只是text-indent: -9999px用来隐藏它并显示背景图像。每个链接都设置为块和 10 像素宽和高。但是我不能让它们在 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;}
4

3 回答 3

2

我要这个？

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

于 2012-04-20T19:35:35.040 回答
1

看看这个 jsfiddle

http://jsfiddle.net/h2r6c/

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

于 2012-04-20T19:33:55.727 回答
1

如果居中是指每个都居中在容器的中间，因此彼此堆叠在一起，请不要漂浮。关键是margin:auto

#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;
于 2012-04-20T19:34:05.537 回答