CSS图像未对齐

我对网页设计有点新鲜。我有一个包含两个主要部分的网页 - 带有徽标的文字和下面的居中图像。CSS图像未对齐

为了使徽标浮动在第一节文本中，我添加了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; 
}

感谢。

来源

2011-02-12 SharpAffair

将您的css/html发布到pastebin.com并为您提供页面快照。从描述中很难看到发生了什么。 – 2011-02-12 14:39:09

将“margin-top：150px”添加到第二个图像解决了问题。

来源

2011-02-12 15:37:20 SharpAffair

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

来源

2011-02-12 14:40:51 GolezTrol

我有很多问题与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>

我个人认为它看起来丑陋，但它在每一个我已经测试了浏览器。

如果您需要调整位置，只需使用一点值即可。

来源

2011-02-12 15:01:32

CSS图像未对齐

回答

相关问题