Possible Duplicate:
Aligning image to center inside a smaller div
I have a problem which points to CSS 3. Please see the part of my HTML code:
<div id="main" style="width: 320px; height: 400px;">
<img src="test.jpg" height="400" />
</div>
I don't know the real sizes of the test.jpg file (width can be different - the file is dynamic). I want to have the image in the middle of id="main" (I don't care, that the left & right part of the image will be out of range - it's even better). How can I do that ?
As long as you specify any width
, you can center by adding margin:auto;
. This isn't CSS3.
<img src="test.jpg" style="margin:auto; width:200px;display:block" />
this will do the work
<div id="main" style="width: 320px; height: 400px;background-position:center;background-repeat:no-repeat;background-image:url('test.jpg')">
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With