Question

I’ve added a pager to my Jquery Cycle, and things are working fine. I’d like to center the pager thumbnails (I’m not actually using REAL thumbnails … just referring to the pager numbers as thumbnails).

So if I have 7 slides, I’d like pager1, pager2, etc,. through pager7 to be centered, instead of aligned to the left.

I’m not sure if it’s in my css, but I went to my .css, and tried text-align: center, but that didn’t do anything. I currently have this in my css:

.pager a { border: 1px solid #dde4ec; background: #465c71; text-decoration: none; margin: 0 5px;  padding: 3px 5px; }
.pager a.activeSlide { background: #dde4ec; }
.pager a:focus { outline: none; 
 -moz-box-shadow: 5px 5px 2px #fff;
-webkit-box-shadow: 5px 5px 2px #fff;
box-shadow: 5px 5px 2px #fff;}

JSFiddle (thanks to PI) is located here: http://jsfiddle.net/jasonpaulweber/SjXVc/

Any suggestions would be appreciated!

Answer 1

Here: http://jsfiddle.net/NpUxP/

display: inline-block instead of just block and no float for .pager a