我无法在 div 内居中图像

Question

我尝试将图像居中，但不确定我做错了什么。我应该更改/添加什么以使图像居中？

#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>

谢谢。

Answer 1

必要的属性被命名为text-align，而不是text-center。此外，您不会将其分配给图像，而是分配给其父容器。

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

Answer 2

两个选项，但你似乎混合了它们。

要么将text-align: center 设置为父，要么将margin: 0 auto 设置为子元素- 并将该元素设置为block。这是因为img 的默认显示属性为inline-block。

文本对齐的父级 - 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;
}

要阻止的孩​​子 - 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

在您的 css 中使用以下更改

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

或

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