CSS图像未对齐答案

【问题标题】：CSS image misalignedCSS图像未对齐
【发布时间】：2011-06-26 02:30:11
【问题描述】：

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

为了使徽标与第一部分文本一起浮动，我在图像中添加了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;
}

谢谢。

【问题讨论】：

将您的 css/html 发布到 pastebin.com 并向我们提供您页面的快照。从您的描述中很难看出发生了什么。
你能给我们你当前的html和css吗？最好在jsbin.com 或jsfiddle.net 上创建一个演示
你能提供资源吗？否则，这有点像水晶球游戏。
刚刚用页面和相关的 CSS 代码更新了问题。
你有图片的绝对网址吗？

标签： css image alignment positioning

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

首先，使用 em 或 % 代替 px，它们是可扩展的（对于使用手机等的人）。在 100% 缩放时，大约 1 em = 16 px。

我通常使用 2 个 div 来居中：

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

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

如果您需要调整位置，只需稍微调整一下值即可。

【讨论】：

【解决方案3】：

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

【讨论】：