Как разместить ссылки на уровне блока в пределах div

Question

Это выглядит очень просто, но по какой-то причине я борюсь с этим. У меня есть некоторые ссылки, которые управляют слайдером содержимого 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;} 

Answer 1

проверить этот jsfiddle

http://jsfiddle.net/h2r6c/

Я добавил маржу к ссылкам, чтобы увидеть, где они начались и закончились. Кроме того, избавьтесь от float:left в вашей ссылке CSS, и вы хороши, если они не являются блочным уровнем. Они должны быть display:inline-block, чтобы быть бок о бок, как вы хотите.

Answer 2

Если по центру вы имеете в виду, что каждый из них центрирован в середине контейнера и, следовательно, уложен сверху друг на друга, не плавайте. И ключ маржа: авто

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

Если, однако, вы имеете в виду каждый из каналов связи бок о бок, и они сосредоточены в виде набора в середине контейнера, а затем использовать дисплей: встроенный -блокировка по ссылкам, с выравниванием текста: по центру на контейнере:

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

Answer 3

Я хочу этого?

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