Centering an Image

Three methods to center an image

Method 1:

img.post {
padding: 6px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
display:block;
margin-left:auto;
margin-right:auto;
}
< img class="post" src="image.jpg" / >

Method 2:

If you want it as a div with the ID of "post" then

#post img {
padding: 6px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
display:block;
margin-left:auto;
margin-right:auto;
}

< div id="post" >
< img src="image.jpg" >
< /div >

Method 3:

Using Text-align:center to center an image.

.ctr { text-align:center;}
.img1 {border:none; width:450px; margin:10px;}

< div class="ctr" > < img class="img1" src="images/photos/2004-6-5 00037.jpg" alt="The Origional Gang" /> < /div >