在HTML中对齐图像

Question

I have an image in the css, but I want to add a link to that image so I pulled it out of the css and inserted directly in the HTML with an anchor tag.

I am having trouble aligning the image to the top left of the div class.

<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>

I've tried adding

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

but the image is floating instead of being in the top left corner.

Any thoughts on how to get the image to align to the top left corner via the HTML?

The div tag css is:

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

Answer 1

The padding is causing it to float , it's conforming to the rules you set (have a margin of 45px), if you want it in the top left corner:

See http://jsfiddle.net/9KJA7/ for an example

/* 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;}​​​​​​

Answer 2

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

Answer 3

I think you are looking for;

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

Here is the Live demo. Or do you want this ?

Answer 4

Do you want the image to stay fixed all the time? In that case, remove the padding and use this:

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

Fiddle: http://jsfiddle.net/3u8k6/

Check your code: http://jsfiddle.net/3u8k6/1/

Answer 5

You can try with position absolute on the img tag, like this:

<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>

To make use of position absolute in the image, your div must be position relative. I hope this helps.