How to center slider in css?

问题:

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?

回答1:

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.

回答2:

Change width

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

回答3:

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.

回答4:

In #wpcontent_slider_container's parent element add

text-align:center;

to center align your #wpcontent_slider_container

回答5:

#wpcontent_slider_container{
text-align: center;
}

or use <center> Tag

回答6:

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.

回答7:

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.