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.
You need to declare text-align: center; on the parent element for the margin: auto; method to work...the second one is the same method i used :) and for this the last one might be overkill, but still a great resource...
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
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: http://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.
text-align: center;on the parent element for themargin: auto;method to work...the second one is the same method i used :) and for this the last one might be overkill, but still a great resource...