PDA

View Full Version : Position Correctly...



pcbrainbuster
04-16-2007, 06:17 PM
Heya guys :),

I did try to find the answer on the web but couldn't and so have turned to here (obviously)...

This time the problem is that when you position an image your only positioning the top-left-corner, eg when you set top: 50%; left: 50%; it will set the top-left-corner of the image to there and set the rest correctly...

Please tell me a way to tackle this...

Thanks :)

jscheuer1
04-16-2007, 06:42 PM
Are you trying to center the image on a page? If so, you left that part out from your question. If that is what you are trying to do, add a negative left margin that is half the width of the image and a negative top margin that is half the height of the image.

mburt
04-16-2007, 07:39 PM
Hmm... I think pcbrainbuster may be talking about the background-position; css property. Either way would do the trick.

jscheuer1
04-16-2007, 09:20 PM
Hmm... I think pcbrainbuster may be talking about the background-position; css property. Either way would do the trick.

Hardly, if you want to center a background image:


background:url('whatever.jpg') no-repeat center;

pcbrainbuster
04-17-2007, 06:47 AM
As you probably know this is just a general question by me as a reference for the future...

The thing I am confused with is that when you position something you actually mainly positioning the top left corner of the it and so that comes out wrong... (eg if you position something like this in the style attribute top: 50%; left: 50% it will put the top left corner of the thing there and not the center of it...)-

<html>
<body>
<img style="position: absolute; left: 50%; top: 50%;" src="image.ext">
</body>
</html>

jscheuer1
04-17-2007, 12:06 PM
[A]dd a negative left margin that is half the width of the image and a negative top margin that is half the height of the image.

I had it right the first time.