CSS 图像未对齐

Question

我对网页设计有些陌生。我有一个包含两个主要部分的网页 - 带有 Logo 的文本和下方居中的图像。

为了使 Logo 随第一部分文本 float ，我添加了 float: left; margin: 4px; 图片样式。

下一张图片之前是居中的(模板中有“居中”样式)。
但现在它错误地与上面部分文本的位置而不是页面中心对齐。虽然这个错误出现在 IE 中，但 Firefox 没有问题。 如何使其正确对齐？

页面代码为:

    <img src="images/logo.png" alt="Product Logo" style="float: left; margin: 4px;"/>

    <p>All you need to make it work is to install the software and run it. The result will appear automatically!</p>

    <img class="centered" src="screenshots/screenshot_small.png" alt="Product Screenshot" title="Product Screenshot" style="text-align:center;" />
    <p class="caption">Product Screenshot</p>

“居中”类定义如下:

img.centered {
display:block;
margin:0 auto;
padding:0;
text-align:center;
}

谢谢。

Answer 1

您的图像是 img 元素吗？如果是这样，我认为您也应该向其中添加 display: block 以使 float 正常工作。