Question

我有以下html：

<div id="img_holder">
    <img id="image" src="../../images/img1.jpg" />
</div>

它有以下css：

#img_holder {
    background-color:#EC0610;
    min-height: 500px;
    float:left;
    width: 550px;
}

#image {
    width: 300px;
    height: 450px;
    margin: auto;
    padding-top: 20px;
}

图像的边距未设置，但填充为。此外，当我将边距设置为特定值时，边距有效。当我在谷歌浏览器中使用元素检查器时，样式窗口中的那一行没有通过它的行，所以我假设它是有效的CSS。我只是想不通为什么它不会被设置为自动。

Answer 1

您需要将图片设置为display:block;

demo http://jsfiddle.net/mCen7/

#image {
    width: 300px;
    height: 450px;
    margin: auto;
    padding-top: 20px;
    display: block;
}

Answer 2

非常感谢您向我们提供您的实际目标。

据我了解，你只是希望img在你的div中居中。

img标签是内联标签，即共享文本或字母的行为。它不是一个块，比如div。

内联标记像文本一样水平居中，文本对齐：中心样式，如下所示：

#img_holder {
    background-color:#EC0610;
    min-height: 500px;
    float:left;
    width: 550px;
    text-align: center;
}

#image {
    width: 300px;
    height: 450px;
    padding-top: 20px;
}
<div id="img_holder">
    <img id="image" src="../../images/img1.jpg" />
</div>

将保证金设置为自动的要求

2 个答案: