center slider controls in responsive manner

Question

I want to center the slider controls which you can find here

I tried various ways like right:0; left:0; margin-left:auto; margin-right:auto and two more.

But somehow I am not able to make it center in responsive manner so that in any view port, It always remain center.

So Is there a way to achieve it?

Its bit difficult for me to make JSFiddle. I gave link of my site in question. Won't it help you ? — Twix, May 14 '15 at 13:47
Do you want to use width? What browser should it be able to work in? — Andrew, May 14 '15 at 13:51

score 1 · Accepted Answer · edited May 23 '17 at 12:14

This will centre the Your controls without needing to use width but will only really work for modern browsers:

.anythingSlider-minimalist-round .anythingControls {
  position: absolute;
  z-index: 100;
  opacity: 0.90;
  filter: alpha(opacity=90);
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
}

This method will work for older browsers but you will need a fixed width:

.anythingSlider-minimalist-round .anythingControls {
  position: relative;
  z-index: 100;
  opacity: 0.90;
  filter: alpha(opacity=90);
  bottom: 5%;
  width: 190px;
  margin: 0px auto;
}

There are a few other methods to centring a div on a page it might be worth while looking at some other methods here: How to horizontally center a <div> in another <div>?

score 0 · Answer 2 · answered May 14 '15 at 13:50

It looks like they are just being hidden when dropped into mobile. You can reshow them by putting this in your media query for small (mobile) screens.

.anythingSlider-minimalist-round .anythingControls{
  display: block !important;
  margin: 0 auto;
  text-align: center;
  width: 186px;
  position: relative;
  top: -40px;
  right: 0;
  float: none;
  left: 0;
  bottom: 0;
}

score 0 · Answer 3 · answered May 14 '15 at 13:52

Put the slider controls in a div that has width:100% and its contents set to text-align:center. Position the div absolute, at bottom:20px (adjust this to set the desired offset from the bottom). Finally, the container that contains the slider controls div needs to be set to position:relative.

div.slider-controls {
  width:100%;
  text-align:center;
  position: absolute;
  left: 0px;
  bottom: 20px;     <----- adjust this until you
}                          like the offset from the
                           bottom of the slider

div.slider-container {
  position: absolute;
}

I don;t know what your layout looks like, but in the above example, it is assumed that div.slider-controls is a child element of div.slider-container.

center slider controls in responsive manner

3 Answers3