CSS Centering Slideshow Images

Question

I am having issues horizontally centering my slideshow images so that they are central on all screen sizes / resolutions.

The HTML looks as such

<div id='banner'>
    <div class='slides_container'>
        <div>
            <a href='#'><img src='images/banner.png'></a>
        </div>
        <div>
            <a href='#'><img src='images/banner2.png'></a>
        </div>
    </div>
</div>

And the CSS to match this is:

#banner {
    width:100%;
    margin-bottom:50px;
}

.slides_container {
    width:100%;
    height:500px;
}

.slides_container div {
    width:1100px;
    height:500px;
    text-align:center;
}

I am really struggling here to get the image to center on all screen sizes since padding and margins don't work I am in need of a different method!

Any replies are extremely appreciated.

Solution

You should make sure the .slides_container div is centered within its parent, i.e.

.slides_container div { 
  margin: 0px auto; // center
  width:1100px; 
  height:500px; 
  text-align:center; 
} 

If that doesn't work, you need to make sure the parent container is width 100% of the page.

If the parent is not width 100% of the page, the parent needs to have this property also:

.slides_container {
    margin: 0px auto;
}

If that doesn't work, then you need to make sure its parent is 100% width of the page.

Hope this helps.

Edit

I took a look at it in FireBug, and it was immediately apparent that the slide container is set to 3800px wide, and the div inside doesn't have a width set. If you set the div inside the slide container to 100% width, it will cause it to become 3800px wide, so that won't work.

By the nature of the script you are using, it is using an abolute-positioned div to work. So margin: 0px auto won't work here.

The solution is a bit of javascript to run onload, and on window resize, to set that div which holds the image to the width of your browser window, and text-align: center. So for example, since I have 1280px wide monitor, this centers the image for me:

.slides_control div {
    width: 1280px;
    text-align: center;
}

Comments

[James Parker]

Thanks for the response unfortunately this has not achieved the centering, in fact the result on screen hasn't changed at all.

[breezy]

can you provide a link to see what your seeing?

[James Parker]

Sure thing. tinypic.com/r/246jiav/6 As you can see the images for the slideshow remain to the left.

[Ozzy]

Oh, and I forgot to mention, if the img isn't filling up the div it is contained in, you also need to make sure the div is set to text-align: center; or make the img width the same as the container

[James Parker]

Hi there unfortunately none of the above comments solved the issue :( I have came to the conclusion that because of the quandary of CSS rules applied by the jQuery plugin it will be near impossible. Once the jQuery plugin div classes are removed, with the content wrapper set to 'text-align:center' the images center perfectly. I guess I will have to try a different slideshow plugin unless you think you could be of any further assistance. And just to note I have tried using !important.

[Ozzy]

@LiquidFusi0n if you have IE9 or FireFox with FireBug, press F12 for developer tools, click the 'arrow' icon, select the container in question, and look at the CSS which is actually applied to it, with a little investigation you should be able to find out.

[James Parker]

My apologies Ozzy this is what I meant. When I inspected with firebug I saw the CSS that was being applied, I've added the margin to all possible tags now still no effect. As a last resort I even went and hard coded it into the JQuery plugin. If you think it will help I can post the JS generated CSS as well? Thanks.

[Ozzy]

@LiquidFusi0n Create a jsfiddle.net with your full HTML, CSS and your JS, then give us the link to it.

[James Parker]

jsfiddle.net/vRcxy/1 There you go Ozzy. The Result box needs expanding vertically and horizontally to see the issue fully.

[James Parker]

Thanks a lot it works, I'll write up the JS now. Once again thanks a load :D (Unfortunately I can't give you rep yet, but when I can I will)