How to align an image to the center with css?

Question

I have three images. The need to be aligned so they fit on the same line and are centered. I have managed to align the 1st and 3rd image using float: left; and float: right; but I'm struggling to align the center image.

Here's the involved code:

.postprojects {
     margin-top: 60px;
     padding-left: 35px;
     padding-right: 35px;
     padding-top: 35px;
     background-image:url('image/bgprojects.png');
     width: 889px;
     height: 300px;
     }

.postproject1 {
     float: left;
     overflow: hidden;
}

.postproject2 {
     float: left;
     overflow: hidden;
}

.postproject3 {
    float: right;
    overflow: hidden;
}

Any suggestions?

(PS Disregard the weird clipping on the bottom of the site. It's a padding error)

Answer 1

Try this code, may be:

.postproject2 {
    float: left;
    overflow: hidden;
    margin: 73px 10px 0;
}

Fiddle: http://jsfiddle.net/praveenscience/eFK7F/2/