CSS position absolute help

[dantarantula]

Hello,
I have created a full screen web site, the menu is sat on top of the site. The problem i am having is keeping the menu in the centre of the screen. when i set the position to absolute and then ‘left: 50%’ it doesn got to the center, its very off centre, i can only guess that the anchor point for the element isnt the middle of the object therefore i have to use value of 37% to centre it which is ok on my screen but its all out of place on others. Can anyone help here, by either offering a differnt solution to centreing the menu or how to change the anchoring point of the object ideally.

Sorry if this is difficult to understand i hope ive made it clear.

Thanks

Dan

[HoughtonA]

Some options:

Set it to position:static; margin: * auto; text-align:center; //thanks scott! :P

You’re correct about the “anchor point.” It’s set at the top left of the object (assuming both top/bottom and left/right are set).
If the menu is of a fixed width you can do this: https://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/

If you’re looking for something a little more dynamic: http://www.brunildo.org/test/img_center.html might be a good resource.

[HoughtonA]

I’ve edited, thanks! Yeah, the third one is overkill, but if you’re clever/masochistic, you can make some really fun and interesting formats.

[dantarantula]

Hi, Cheers Guys the example from scott was perfect. thanks so much.

[Author]

Posts