how to keep my slider horizontally centered?

Tags: javascript,css

Problem :

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) ?


Solution :

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.

    CSS Howto..

    Why do the images move when clicked in html and css? How to prevent it? [closed]

    How to stretch items in menu (from right to left) - HTML and CSS

    How to override GWT obfuscated style for DataGrid header

    How to save(download) HTML page with all images, css etc in Android?

    How to make a DIV section clickable?

    How would you code this: The SO highlighted button outline effect [closed]

    CSS background with image and gradient, how to write in multiple lines ?

    How to remove floats so items don't wrap with CSS only in this Codepen

    how to zoom in an image and center it

    How to use horizontal scroll when you have way many columns

    How to turn off visjs active shadow box?

    How to make text go over a CSS background img

    How to override styles between parent - child elements using css selector?

    CSS(3): How to display elements after each other

    How to wrap or label all divs like files in opertaing systems (jQuery) [closed]

    How do I add a mouseover drop shadow effect for circular images?

    How do you create a scrolling window over a still background image with CSS?

    How to dynamically change the style of a comma separated tags with html/css/jquery

    How to display a full-width grid of images that resizes and flows with the browser window with pure CSS

    how to style every html posts differently in css

    CSS: How to use Transform property on a bootstrap grid class

    How to perform --include-css when using the Jekyll stylus plugin

    How do I get this menu to stay top right of the image on hover? - CSS, jQuery

    How to scroll horizontally when there are many columns (or a very long row)?

    How to use css with UIWebView?

    How to make an image hover over another?

    How to Make CSS Property Apply to Everything Within Bootstrap Navbar?

    How to center a 3 column Css Div Site?

    How to embed Javascript in CSS?

    How to get rid of an automatically generated span via CSS (un-display)?