1

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.

connexo
  • 53,704
  • 14
  • 91
  • 128
Michel Ervell
  • 29
  • 4

3 Answers3

4

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; }
connexo
  • 53,704
  • 14
  • 91
  • 128
1

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;
}
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
-2

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;
}
Mitul
  • 3,431
  • 2
  • 22
  • 35
  • 1
    Should also remove the invalid property name `text-center` from the image. – Sam Holmes Jun 04 '15 at 08:57
  • @SamHolmes Ok i know that let me do changes – Mitul Jun 04 '15 at 08:58
  • `margin:0 auto;` will not have any effect unless the `img` is set to `display: block`, and is not necessary as you have `text-align: center` on the parent – Andy Jun 04 '15 at 09:00
  • You can also add the `margin-auto; display:block` to show in center – Mitul Jun 04 '15 at 09:01
  • @Andy there are some more ways also to do show image in center. – Mitul Jun 04 '15 at 09:02
  • @Mitul Yes, but it is not necessary to use more than one solution together. If you are trying to explain both solutions you should separate them in your answer. – Andy Jun 04 '15 at 09:03