在 HTML 中对齐图像答案

【问题标题】：Aligning Image in HTML在 HTML 中对齐图像
【发布时间】：2012-09-06 00:59:24
【问题描述】：

我在 css 中有一个图像，但我想添加一个指向该图像的链接，所以我将它从 css 中拉出并使用锚标记直接插入到 HTML 中。

我无法将图像与 div 类的左上角对齐。

<div class="logoHeader" style="height:125px; width:900px" >
    <a href="http://www.abc123.com/">
        <img src="images/logo.jpg" alt="" style="position:relative;" />
    </a>
</div>

我试过添加

style="padding-top:0px; padding-left:0px;"

但图像是浮动的，而不是在左上角。

关于如何通过 HTML 让图像与左上角对齐有什么想法吗？

div标签css为：

.logoHeader {padding:45px 20px 0px 20px;}

【问题讨论】：

使用诸如萤火虫或铬之类的“检查元素”将极大地帮助解决这些问题。您可以将鼠标悬停在 dom 元素上并查看应用了哪些填充和边距
你想坚持到最左上角吗？
填充不是定位。此外，您没有说明您尝试添加的位置。
@blasteralfred 在 div 的最左上角。不是页面
@user630581 检查我的答案。我用你的 div 来定位图像。它在 div 中。您可以将 div 的边距属性用于图像。

标签： html css image hyperlink alignment

【解决方案1】：

padding 导致它浮动，它符合您设置的规则（边距为 45px），如果您希望它位于左上角：

请参阅http://jsfiddle.net/9KJA7/ 了解示例

/* Ignore */
.logoHeader {background-color: red}
img {height: 50px; width: 50px; background-color: green}

/* Your code */
.logoHeader {padding:45px 20px 0px 20px; position: relative}
img {position:absolute;top:0px;left:0px;}

【讨论】：

【解决方案2】：

.logoHeader 上设置的 padding 将防止图像到达左上角。

【讨论】：

【解决方案3】：

我想你正在寻找；

position: absolute;
top: 0;
left:0;

Here 是现场演示。或者你想要 this？

【讨论】：

【解决方案4】：

您希望图像始终保持固定吗？在这种情况下，删除填充并使用：

.logoHeader {position: fixed; top: 0; left: 0; z-index: 5; padding: 0;}

小提琴：http://jsfiddle.net/3u8k6/

检查您的代码：http://jsfiddle.net/3u8k6/1/

【讨论】：

【解决方案5】：

您可以尝试在 img 标签上使用绝对位置，如下所示：

<div class="logoHeader" style="height:125px; width:900px; position: relative" ><a href="http://www.abc123.com/"><img src="images/logo.jpg" alt="" style="position:absolute; top:0px; left:0px;" /></a></div>

要在图像中使用绝对位置，您的 div 必须是相对位置。我希望这会有所帮助。

【讨论】：