I can't center the image inside the div

Question

I try to center an image but not sure what I'm doing wrong. What should I change/add so the image is center?

 #img-wrap { width:450px; clear:both; display:block } #img-wrap img { margin:0 auto; text-center:center; height:100px; width:100px; background:#000; } 

 <div id='img-wrap'> <img src='https://www.google.co.in/images/srpr/logo11w.png' /> </div> 

Thanks.

Answer 1

The necessary property is named text-align , not text-center . Also, you don't assign it to the image, but to its parent container.

#img-wrap { text-align: center; }

Answer 2

Two options, but you seem to mix 'em.

Either you set text-align: center to the parent , or you set margin: 0 auto to the child - and set that element to block . This happens because img has a default display property of inline-block .

Parent to text-align - http://jsfiddle.net/BramVanroy/w0jecf01/2/

#img-wrap {
    width:450px;
    border: 3px solid black;
    text-align: center;
}
#img-wrap img {
    height:100px;
    width:100px;
    background:#000;
}

Child to block - http://jsfiddle.net/BramVanroy/w0jecf01/1/

#img-wrap {
    width:450px;
    border: 3px solid black;
}
#img-wrap img {
    margin:0 auto;
    height:100px;
    width:100px;
    display: block;
    background:#000;
}

Answer 3

Use following changes in your css

 #img-wrap {
    width:450px;
    clear:both;
    display:block;
    text-align:center;
}
#img-wrap img {
    height:100px;
    width:100px;
    background:#000;
}

OR

#img-wrap {
   width:450px;
   clear:both;
    display:block;
    text-align:center;
}
#img-wrap img {
    margin:0 auto;
    height:100px;
    width:100px;
    background:#000;
    display:block;
}