CODEWITHSUNDEEP
htmlcss
Michel Ervell
Michel Ervell

Reputation: 29

I can't center the image inside the div

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.

Upvotes: 1

Views: 152

Answers (3)

Bram Vanroy
Bram Vanroy

Reputation: 28437

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;
}

Upvotes: 1

Mitul
Mitul

Reputation: 3427

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;
}

Upvotes: -2

connexo
connexo

Reputation: 56754

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; }

Upvotes: 4

Related Questions