CSS Image Gallery will not center

Question

    .imgContain{
    width: 100%;
    margin: 0 auto;
    position: relative;
    text-align: center;
}

.imgContain img{
    width: 250px;
    height: 250px;
    float: left;
}

.imgContain img:hover{
    opacity: 0.60;
}

For some reason, this will not center on my page. Any help is appreciated.

Answer 1

Hard to understand what you really want to happen, but here is another way using inline-block - http://jsfiddle.net/sheriffderek/29jvS/

HTML

<div class="imgContain">
    <img src="http://placehold.it/400x400" alt="" />
    <img src="http://placehold.it/400x400" alt="" />
</div>

CSS

.imgContain{
    text-align: center;
}

.imgContain img {
    display: inline-block;
    width: 250px;
    height: 250px;
}

Answer 2

please specify the width for your image container in terms of pixels. when you give the width as 100% margin: 0 auto; will not work. please check this fiddle and let me know if this solved your problem : http://jsfiddle.net/LynDL/2/

Answer 3

You need to take care of the imgContain width. Its in '%' while the image widths you provided in 'px'. Suppose if you want 4 250px images in row then you should keep the imgContain width 1000px. eg :

.imgContain{
    width: 1000px;
    margin: 0 auto;
    position: relative;
    text-align: center;
}
.imgContain img{
    width: 250px;
    height: 250px;
    float: left;
}

If you want to go fluid way then let the imgContain width be 100% but change the image widths to 25%.

.imgContain{
    width: 100%;
    margin: 0 auto;
    position: relative;
    text-align: center;
}
.imgContain img{
    width: 25%;
    height: 25%;
    float: left;
}

Hope it helps.