Search code examples
csscenterfooter

Shift Footer tag to center

I am working on a website adapted from http://joelb.me/scrollpath/ I want to relocate the footer menu which is float left to center. I have been working on this from 3 days. Kindly help

Solution

  • I have checked the URL you have given in the question above. The nav has position: fixed. Therefore, adding a couple of CSS properties would do the job. You can add the below properties.

    width: 320px;
left: 50%;
margin-left: -160px;

    The trick is to give left as 50% which makes the element to start rendering after (vertical) center of the viewport. Then give margin-left as negative to pull it slightly back to left. Now, giving the magnitude of margin-left as half of the element's width will make sure that the element is pulled back to left in such a way that its vertical center coincides with that of the viewport.