0

我在 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;}
4

5 回答 5

2

填充导致它浮动，它符合您设置的规则（边距为 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;}​​​​​​
于 2012-09-05T16:55:30.950 回答
1

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

于 2012-09-05T16:54:00.590 回答
1

我想你正在寻找；

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

这是现场演示。还是你想要这个？

于 2012-09-05T16:59:24.640 回答
0

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

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

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

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

于 2012-09-05T16:54:42.567 回答
0

您可以尝试在 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 必须是相对位置。我希望这有帮助。

于 2012-09-05T16:56:05.890 回答