Cant center my images in Jquery Cycle Slideshow

Question

I have this problem and I can't find a solution anywhere at all....

I have 3 divs inside 1 div and those 3 divs each have 3 images and they all go side by side. I used jQuery cycle to make 3 slideshows. That works perfectly. Some of the images need to be centered as you can see here

http://jsfiddle.net/rBaWG/19/

or

http://www.willruppelglass.com/index.php

I have tried everything, but it appears jQuery cycle is adjusting my css code to center these images, does anyone know how to fix this?

Answer 1

Give this a shot:

.pics {  
    padding: 0;  
    margin: 0 auto; /* CHANGE HERE */
    width: 225px;
    height: 200px;
} 

.pics img {    
    background-color: #eee;
    /* Removed top and left */
}

.contentImages {
    text-align: center; /* Add */
    border: 1px solid #CCC; 
    padding: 10px; 
    margin: 20px auto 0; 
    position: relative;
    width: 675px;
    overflow: hidden;
}

Working jsFiddle for horizontally centered images, at least in Chrome. Question: Do you want the three images to be side by side or on top of each other?

If you want them side by side, you will have to remove the width from the .pics class in the above CSS.

Answer 2

I have tried and tested this and it works as required:

HTML:

<div class="contentImages">
    <div class="pics">
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home1.jpg" height="200"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home2.jpg" height="200"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home3.jpg" height="200"/></div>
    </div>
    <div class="pics2">
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home5.jpg" width="225"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home4.jpg" height="200"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home6.jpg" height="200"/></div>
    </div>
    <div class="pics3">
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home7.jpg" height="200"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home8.jpg" height="200"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home9.jpg" height="200"/></div>
    </div>
</div>

CSS Addition:

.cc img{
    margin: auto;
}
.cc{
    text-align:center;
    width:225px !important;
    overflow:hidden;
}