Center an Image

Three methods to center an image

Method 1:

Styling the img.

CSS

img.post {
padding: 6px;
border: none;
display:block;
margin-left:auto;
margin-right:auto;
}

HTML

<img class="post" src="image.jpg" />

Method 2:

Using a div with the ID of "post".

CSS

#post img {
padding: 6px;
border: none;
display:block;
margin-left:auto;
margin-right:auto;
}

HTML

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

Method 3:

Using Text-align:center to center the div.

CSS

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

HTML

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

♠ ♣ ♥ ♦