how to keep my slider horizontally centered ?

Question

hi,

I have a recurrent design issue when I use sliders in my photo galleries.

Let's say I'm using a slider such as < 1 / 14 > centered below the current image.

I cannot use text-align:center because I'm using position:absolute to move it right below the image. (I usually use lightbox2 pluging and I need to move the components according to the layout).

Now, when I reach the image < 10 / 14 >, the slider is not anymore perfectly centered (because of the additional number.

How can I solve this (possibly with css) ?

thanks

Answer 1

I usually wrap the numbers in their own block level element so you can specify a fixed width for them and then the total width doesn't change and the whole construct remains centered regardless of the numbers being shown.