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.

Answer 1

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;
}