3

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!

Jason Weber
  • 5,653
  • 6
  • 40
  • 73

2 Answers2

4

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

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

welldan97
  • 3,071
  • 2
  • 24
  • 28
  • Note that this does not work in IE7!, the solution is to add a conditional CSS for IE7 with `display: inline` and it works :) – jackJoe Feb 15 '12 at 10:59
  • Welldan, your solution was perfect! It accomplished exactly what I wanted it to! Thanks a ton for taking the time to respond, and even show your own fiddle. As far as the IE7, thanks for the heads-up, Jackjoe ... but I'm not as worried about those antiquated browsers. But I'll check into it. Thanks again Welldan, great answer! I wish I had 1% of your js / css knowledge! – Jason Weber Feb 15 '12 at 11:17
1

You can also do it with auto margin:

body {
   text-align: center;
}

.pager {
  margin: 0px auto;
  width: 220px;
}

http://jsfiddle.net/SjXVc/1/

PiTheNumber
  • 22,828
  • 17
  • 107
  • 180
  • Thanks for the input, PI, and taking the time to help me with the jsfiddle! I understand your thought process, and it makes sense -- you're really helping me understand css. I really do appreciate your help! – Jason Weber Feb 15 '12 at 11:15