How to center images

How to center a image in a div.

<div class="div1">
     <img src="image1.jpg" alt=""  />
</div>

<div class="div2">
     <img src="image2.jpg" alt=""  />
</div>

asked Sep 1, 2012 in CSS by Tamal Dey New (650 points)

2 Answers

Yo can center the image by just centering the whole div tag.,Here is the example,

<div class="div1" align="center">
     <img src="image1.jpg" alt=""  />
</div>

Give width to div tag and then center the image,,here is the example,

<div class="div2" width="100%">
     <img src="image2.jpg" alt="" align="center" width="50%"  />
</div>

answered Sep 5, 2012 by Vishal Modi New (480 points)

Hi, thanks vishal for the answer :)

commented Sep 5, 2012 by Tamal Dey New (650 points)

Your welcome... :)

commented Sep 5, 2012 by Vishal Modi New (480 points)

I have another solution using css,

div{width:100%;}
div img{ display:block; margin: 0 auto; }

This will bring the image in the centre of the relative div

answered Sep 5, 2012 by Tamal Dey New (650 points)

Yeah...This is also one of solutions....Nice one...

commented Sep 5, 2012 by Vishal Modi New (480 points)

But the problem is that it will apply 100% width to all div tags and so for the div img....
SO use it carefully...

commented Sep 5, 2012 by Vishal Modi New (480 points)

...