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

intro是给img的id，它只是浮动到div的左边（id是包装器）并且即使我将左右边距设置为auto也不会居中？

Answer 1

margin: auto;的问题在于它只会将块级元素居中......而img默认显示为inline并跟随文本流（左侧）。如果您向其添加 display: block ，则应该有效：

<强> DEMO

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

这样您就不需要集中对齐包装元素的文本。

但是，如果您想要将所有inline个孩子放在包装中心 - 只需在text-align:center上使用 #wrapper ...但是您可能需要在图像之前和之后有换行符或者某些文本可能会在它们旁边结束并将它们推出中心=）

DEMO

Answer 2

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

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

如何将我的图像居中对齐？

2 个答案: