How to put an image inside of a smaller div in the middle?

Question

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 ?

I don't see any CSS3 here, unless you're saying your image and div are involved in some transform or animation where this problem shows up. Could you elaborate? — BoltClock, Dec 26 '11 at 21:03
now it looks like this: http://dl.dropbox.com/u/3074090/_temp/1.png but I want to put the image like this: http://dl.dropbox.com/u/3074090/_temp/2.png — , Dec 26 '11 at 21:04
Is it not an option to simply make the image a background image? — thirtydot, Dec 26 '11 at 21:08
@jeroen: That won't work once the image width exceeds the container width - it'll simply overflow to the right (or the left, if in RTL mode). — BoltClock, Dec 26 '11 at 21:16

score 4 · Answer 1 · answered Dec 26 '11 at 20:59

4

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" />

answered Dec 26 '11 at 20:59

DOK

32,337
7
60
92

I don't want to resize the image (width 200), just align to the center – Dec 26 '11 at 21:07
but I don't know the real sizes, so I can't set the width to i.e. 200px – Dec 26 '11 at 21:11
try setting the image width as 100% instead of a fixed number of pixels – DOK Dec 26 '11 at 21:29

score 3 · Answer 2 · answered Dec 26 '11 at 21:12

3

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>

answered Dec 26 '11 at 21:12

Deept Raghav

1,430
13
14

did you try this method? – Deept Raghav Dec 27 '11 at 07:11
Yes, but I would prefer to use . I have solved the problem using jquery. – Dec 28 '11 at 08:18
could you share with us? – Deept Raghav Dec 28 '11 at 08:19

How to put an image inside of a smaller div in the middle?

2 Answers2