Question

我对网页设计有些新意。我有一个包含两个主要部分的网页 - 带有徽标的文字和下面的居中图片。

为了使徽标浮动第一部分文本，我在图像中添加了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以使浮动工作正常。

Answer 2

我在CSS和对齐方面遇到了很多问题。

首先，使用em或％而不是px，它们是可扩展的（对于使用手机等的人）。在100％变焦时，大约1 em = 16像素。

我通常使用2个div这样的东西：

<div style="position:absolute; width:50%; left:50%;">
<div style="position:absolute; width:50%; left:-50%;">
    <!-- Image here -->
</div></div>

我个人认为它看起来很难看，但它适用于我测试过的每个浏览器。

如果您需要调整位置，只需稍微使用这些值。

Answer 3

在第二张图片中添加“margin-top：150px”解决了这个问题。

CSS图像未对齐

3 个答案: