Question

过去一个月我一直在学习HTML和CSS，我已经建立了一些网页，但由于某种原因，这个网站有点问题。

我似乎无法将图像置于margin:0 auto的中心，尽管图像对指定的边距值反应良好。该图像在标题标记内的“意大利”div中被分类为“fotosize”。

编辑：感谢您提供解决方案，但此解决方案不适用于其他两张图片。 http://jsfiddle.net/1Ldf8j79/

感谢。

Answer 1

因为默认情况下，图像元素为inline (replaced) elements，所以就margin: 0 auto规则而言，它们的行为与块元素的行为不同。

您只需更改图片的display CSS属性即可使其正常工作：

.fotosize {
    width:100px;
    height:72px;
    margin: 0 auto;
    border: 1px outset gold;
    border-radius: 20px;
    display: block;
}

JSFiddle

如果您无法更改图片的显示，则必须使用#italy集中对齐text-align的内嵌内容：

#italy {
    border-radius: 500px;
    width: 33%;
    height:auto;
    float:left;
    background:-webkit-linear-gradient(right, #FE1800 10%, #FFFFFF 66%, #40C401 100%, transparent 100%);
    text-align: center;
}

JSFiddle

无法以保证金为中心的图像：0自动

1 个答案: