CODEWITHSUNDEEP
csswordpressslidercenter
Blackburn Rovers
Blackburn Rovers

Reputation: 21

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?

Upvotes: 2

Views: 32150

Answers (8)

Hitokage
Hitokage

Reputation: 803

I had a similar problem. These two were the key things, especially the block display mode made the slider centerable by margin.

margin 0 auto;
display: block;

Upvotes: 0

Sky
Sky

Reputation: 9

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.

Upvotes: 0

Hugo
Hugo

Reputation: 1

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.

Upvotes: 0

user2375147
user2375147

Reputation: 21

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.

Upvotes: 2

Jesse Kernaghan
Jesse Kernaghan

Reputation: 4634

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.

Upvotes: 1

Ajay Patel
Ajay Patel

Reputation: 5418

#wpcontent_slider_container{
text-align: center;
}

or use <center> Tag

Upvotes: 0

user1432124
user1432124

Reputation:

In #wpcontent_slider_container's parent element add

text-align:center;

to center align your #wpcontent_slider_container

Upvotes: 1

user1317647
user1317647

Reputation:

Change width

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

Upvotes: 2

Related Questions