我無法將圖像置於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;
}