html - 如何将我的图像居中对齐到 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;
}

intro 是给所说 img 的 id，它只是浮​​动到 div 的左侧(id 是包装器)并且不会居中，即使我将左右边距设置为 auto？

Answer 1

margin: auto; 的问题在于它只会将 block 级元素居中...并且 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