我无法将图像置于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;
}