如何將圖像居中對齊div？

Question

我的div打算包含上述站點上的所有內容，我嵌套在div中的圖像不想居中，而且我不確定為什么嗎？

這是CSS。

#wrapper {
width: 1000px;
margin: 0 auto;
background-color: #f4f9f1;
}

#intro {
padding-bottom: 10px;
width:80%;
margin:10px auto;
border-bottom: 3px solid #b32230;
}

簡介是給img的ID，即使我將左右邊距設置為auto，它也會浮動在div（id是wrapper）的左側並且不會居中？

Answer 1

margin: auto;的問題margin: auto; 就是它只會使中心塊級元素...而img在默認情況下顯示為inline並遵循文本流（向左）。 如果您添加display: block ，它應該可以工作：

演示

#intro {
    display: block;
    padding-bottom: 10px;
    width:80%;
    margin:10px auto;
    border-bottom: 3px solid #b32230;
}

這樣，您就不需要集中對齊包裝元素的文本。

但是，如果您想將包裝器的所有inline子項居中-只需在#wrapper上使用text-align:center ...但是，您可能需要在圖像前后插入換行符，否則某些文本可能會#wrapper在旁邊他們，並將其推出中心=）

演示

Answer 2

使用text-align: center在主容器上text-align: center ：

#wrapper {
    width: 1000px;
    margin: 0 auto;
    background-color: #f4f9f1;
    text-align: center;/*Add text-align center*/
}