Question

This would appear to be super simple, but for some reason I am struggling with this. I have some links that control a jQuery content slider. The links need to be centered at the bottom of the slider. The text of the links are set via the jQuery plugin I am using so I just use text-indent: -9999px to hide it and display a background image instead. Each link is set to block and 10px wide and tall. However I cannot get them to be centered within a div. Here’s a little diagram of what I want to do.

|                                           • • •                                         |

The 3 bullets represent the links I want to center. I want them to be centered whether or not I have 2 links or 10 links. If I had a set number of links this would probably be a lot easier as I could create a parent with a fixed width and use margin:0 auto; on it.

Here’s my code so far…

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

check out this jsfiddle

http://jsfiddle.net/h2r6c/

I added a margin to the links, just so see where they started and ended.
Apart from that, get rid of the float:left in your link CSS and you’re good, provided they aren’t block level. They need to be display:inline-block to be side-by-side like you want.