CODEWITHSUNDEEP
cssalignment
djames
djames

Reputation: 49

How to align an image to the center with css?

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.

https://dl.dropbox.com/u/94786808/example.png

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?

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

Upvotes: 1

Views: 89

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Try this code, may be:

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

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

Upvotes: 1

Related Questions