CODEWITHSUNDEEP
css
Katie
Katie

Reputation: 327

CSS: How to center a bottom-fixed menu

I've made a menu strip that I would like fixed to the bottom center of the page. I've tried everything. Is there a way to do this in CSS? I've gotten the menu to be fixed at the bottom of the page with

bottom: 0px position: fixed

but using

margin: auto auto 0px auto or margin-left: auto

doesn't seem to center the menu. It's just stuck to the left side of the page. Any thoughts would be greatly appreciated!

Upvotes: 12

Views: 25783

Answers (4)

bernie
bernie

Reputation: 10390

display: flex now makes this very easy! See below:

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.content {
  background: grey;
}
<div class="footer">
  <div class="content">My bottom-fixed content</div>
</div>

With this solution, there is no need to set a fixed width which can be more flexible.

Upvotes: 11

Yevgeniy
Yevgeniy

Reputation: 318

To center an element you need to specify width and set left and right margins to auto. Then to stick such an element to the bottom of the page you need to wrap it in another element which has fixed width, say 100% and is positioned on the bottom. And yes, css you can.

<section style="position: fixed; bottom: 0px; width: 100%;">
 <p style="margin: 0 auto; width: 300px;">Blah blah</p>
</section>

Upvotes: 7

mrtsherman
mrtsherman

Reputation: 39872

You can use a left property of 50% and a negative left margin equal to half the width of the footer.

http://jsfiddle.net/N7MB5/

#footer {
    width: 600px;
    position: fixed;
    bottom: 0;
    left: 50%;
    margin-left: -300px;
}

Upvotes: 8

Elliot Bonneville
Elliot Bonneville

Reputation: 53301

#myElemId {
    width: 100px;
}

Note the fixed width; this is essential for margin: auto to work. If this doesn't solve it, then there must be a problem elsewhere.

Edit: You'll also need this (jQuery):

$("#myElemId").css({
    left: window.innerWidth/2 - $(this).css("width")/2
});

This allows you to set the width to whatever you want without having to update the rest of the CSS code.

Upvotes: 1

Related Questions