CSS and Images

[master maste]

I have been trying for awhile to get my image positioned in the center, when I use a background image it works when I do this:

#div {
	background: url(images/header.jpg) no-repeat 50% 0%;
	height: 250px;
}

But when I put the image in the html and try center it like this:

#div img {
	padding-left: 50%;
	height: 250px;
}

It does not work, it puts the left margin of the picture at 50%, is there a way I can put the image in the middle of the page without specifying it in pixels, and not having it as a background (so I can make it a link).

 

[enouwee]

Using the following would be too easy, right?

background-position: center top;

 

[master maste]

I don't think you understand, I can get it working with a background image, but I would prefer it to be a normal image that is perfectly centered, and as a link...

 

[TFlan]

<a href="./path/to/link.html"><img src="./path/to/file.png" width="##" height="##" alt="Caption" title="Caption" style="position:relative;left:50%;margin-left:-(WIDTH/2)px;top:50%;margin-top:-(HEIGHT/2)px;" /></a>

Crude, but works.

 

[master maste]

Yes it definitely is crude. Thanks for that, but its still putting the left side of the image at 50%... and obviously thats not going to center it.

 

[phyrex1an]

Perhaps:

<div style="width: 100%; text-align:center;">
	<a href=""><img src="" alt="" /></a>
</div>

 

[JerseyFoo]

Divs fill up their containing space by default. text-align is the correct definition. vertical-align: middle; for top/bottom.

 

[master maste]

Perhaps:

<div style="width: 100%; text-align:center;">
	<a href=""><img src="" alt="" /></a>
</div>

That just pushes the image to the far left, and makes me have to scroll to the right....