CSS:如何使底部固定菜单居中

问题描述 投票:4回答:4

我已经制作了一个菜单条,我希望它固定在页面的底部中心。我已经尝试了一切。有没有办法在CSS中这样做?我已经将菜单固定在页面底部

底部:0px位置:固定

但使用

保证金:自动自动0px自动或保证金左:自动

似乎并没有使菜单居中。它只是粘在页面的左侧。任何想法将不胜感激!

css
4个回答
4
投票

要使元素居中,您需要指定宽度并将左右边距设置为自动。然后将这样的元素粘贴到页面的底部,你需要将它包装在另一个具有固定宽度的元素中,比如100%并且位于底部。是的,你可以。

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

5
投票

您可以使用50%的左侧属性和等于页脚宽度一半的负左边距。

http://jsfiddle.net/N7MB5/

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

1
投票
#myElemId {
    width: 100px;
}

注意固定宽度;这对于margin: auto的工作至关重要。如果这不能解决问题,那么其他地方一定存在问题。

编辑:你还需要这个(jQuery):

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

这允许您将宽度设置为您想要的宽度,而无需更新其余的CSS代码。


0
投票

display: flex现在让这很容易!见下文:

.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>

使用该解决方案,不需要设置可以更灵活的固定宽度。

© www.soinside.com 2019 - 2024. All rights reserved.