in a css three column setup using the float:left how do I horizontally centre an image inside each column

Question

I've taken a look through post on here but seem unable to find a solution that wants to work and I'm wondering if my float:left tags are causing the issue.

Basically I have wordpress blog I'm trying to set using nextgen gallery now for what I wish to do I need to modify way it displays a list of images. into three sections. Centring each image with in the column. Now I've set this using the following code which creates the three columns fine below this its very basic but it does not work on here I assumed I would be able to use the margin:0 auto; but this does not work.

http://jsfiddle.net/locka/dcdkf/

HTML

<div id="wrapper">
<div id="column-left">
<p>LEFT </p>
  <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQtZTDwx3wVJMqWWTlCW8BDZ7fPvQVbRZpILy0NAeHIGaRxcRtR">
</div>
<div id="column-center">
    <p>MIDDLE </p>
    <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTCgQRoPbKR8WpHtPZfBiPKK6NaNN3vyWqLarsKDDb0zLWd0AID"></p>
   </div>
<div id="column-right">
    <p>RIGHT </p>
   <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcScF65ryaqzfG9gpVrld1CLJ7_5wJOpmH96FRvB4TvnkFaqyloh">
</div>

CSS

* {
margin: 0;
padding: 0;
}

#wrapper {
width: 980px;
background: silver;
margin: 0 auto;
}

#column-left {
width: 280px;
float: left;
background: red;
}

#column-center {
width: 420px;
float: left;
background: GREEN;
margin: 0 auto;

}

#column-right {
width: 280px;
float: left;
background: BLUE;
}

I've basically need to have 3 images in a row these may be 2 size either a landscape or portrait both same hight but different widths I need to centred each image with in it's column. The left and right columns will be the same with as the widest image that way as landscape photo's they will always look like they are left and right aligned and if portraits appear centred in there respect columns. Then the centre column will take up the rest of the space and this will centre all images thus giving equal border left and right. and making them tidy.

I can set up the columns following what looks to be stand way across the net how try as I might can not centre the images.

Answer 1

Images are by default inline elements, and will as such obey the text-align CSS rule of its parent. Since text-align doesn't work in your case, it must mean that your images are not inline elements anymore. Probaby there is a img { display: block } somewhere in your CSS.

This means that margin: 0 auto should do the trick. The problem is that you are applying that style on the img's container instead of on the img itself.

So, instead of

#column-center {
  width: 420px;
  float: left;
  background: GREEN;
  margin: 0 auto;
}

use

#column-center {
  width: 420px;
  float: left;
  background: GREEN;
}

#column-center img {
  margin: 0 auto;
}