How to center img inside the div

Question

Possible Duplicate:
How to center image inside div

I need to be able to put the image in the center of the div. My image needs to be in the center in whatever resolution.

Code:

<div style="width:100%; height:20%;">
    <img src="images/pic.png" id="image"  style="width: 208px; height: 75px;margin-left: 42%;" alt=""/>
</div>

This is not working as it should.

Simple words in google gave me result with the above as the first entry.Google my friend. — gdoron, Nov 05 '12 at 13:11

score 4 · Accepted Answer · answered Nov 05 '12 at 13:10

4

<div style="width:100%; height:20%; text-align:center">
    <img src="images/pic.png" id="image"  style="width: 208px; height: 75px; margin:0 auto;" alt=""/>
</div>

Should work for ya

answered Nov 05 '12 at 13:10

George

36,413
9
66
103

text-align:center was the thing that I need – user123_456 Nov 05 '12 at 13:13
yea sure..I needed to wait 10 min to accept :) sorry for that – user123_456 Nov 05 '12 at 13:23

score 3 · Answer 2 · edited Nov 05 '12 at 13:13

3

Try this:

<div style="width:100%; height:20%;text-align:center;"> 
<img src="images/pic.png" id="image style="width:208px; height:75px; margin-left:42%;" alt=""/>
</div>

edited Nov 05 '12 at 13:13

dsgriffin

66,495
17
137
137

answered Nov 05 '12 at 13:10

G . R

543
1
6
12

score 0 · Answer 3 · answered Nov 05 '12 at 13:12

0

#Sample
{
background:url(your_image.jpg) no-repeat center center;
height:200px;
width:200px;
}

(Assumes a div with id="sample" as you are already specifying height and width adding a background shouldn't be an issue)

answered Nov 05 '12 at 13:12

Akhil

1,073
1
9
28

score -1 · Answer 4 · answered Nov 05 '12 at 13:13

-1

This is because you have a margin-left of 42% set to the image. Try this on the image style:

display:block;margin:0 auto;

answered Nov 05 '12 at 13:13

randomizer

1,619
3
15
31

2

IE7,8,9, Firefox and Chrome do, what more do you need.. – randomizer Nov 05 '12 at 13:16

How to center img inside the div

4 Answers4