How to center slider in css?

1
votes

I installed this plugin on a theme. This theme had a slider, but I didn't like it. So I installed this one.

http://wordpress.org/extend/plugins/content-slide/

I tried using this 

#wpcontent_slider_container{
position:relative;
margin: 0 auto;
}

And this

#wpcontent_slider_container{
position:relative;
margin-left:auto;
margin-right:auto;
}

And nothing happens.

Do I have to put something in div?

7
csswordpressslidercenter
do you want to center this #wpcontent_slider_container or the content in #wpcontent_slider_container – user1432124
This is how I want to look like dodaj.rs/f/2x/Ay/39nHZAWw/slider-center.jpg – Blackburn Rovers
try recreating the problem with jsfiddle, so we can edit the fiddle and fix it. The css should be width:x, margin:10px auto; and the parent should also have a width and maybe float:left; – Ruben

7 Answers

2
votes

Change width

#wpcontent_slider_container{
    width: 500px;
    margin:0 auto;
}
2
votes

I had the same problem. This is how I solved it:

#wpcontent_slider_container {
margin-left: auto !important;
margin-right: auto !important;
}

#wpcontent_slider {
/* Your styling here */
}

Without the "!important" thingy the CSS didn't work fo me either.

1
votes

In #wpcontent_slider_container's parent element add

text-align:center;

to center align your #wpcontent_slider_container

1
votes

If you know the width of the slider, here is a little fix that worked for me when center align was being stubborn.

#sliderDiv{
   position:relative;
   left:50%;
   margin-left:-(half the width of the div);
  (ex. if div is at 500px it would be margin-left:-250px;)
 }

It's not pretty, but it works. You might have to hide the horizontal overflow of the outer container though.

0
votes
#wpcontent_slider_container{
text-align: center;
}

or use <center> Tag

0
votes

Finally I can fix the problem with the slider ubication in my web page.

Just modify the style.css , .main_img { float:left; margin:15px 10px 0 60px}, change the values.

0
votes

Using the 'margin-right' and 'margin-left' on auto !important worked for me as well. It actually also worked even without using the !important command.