css - CSS：如何使底部固定的菜单居中

Question

我制作了一个菜单条，我想将它固定在页面的底部中心。我什么都试过了。有没有办法在 CSS 中做到这一点？我已经将菜单固定在页面底部

底部：0px 位置：固定

但使用

边距：自动自动 0px 自动或边距左：自动

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

score 5 · Accepted Answer

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

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

score 5 · Accepted Answer

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

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

score 5 · Accepted Answer

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>

有了这个方案，就不需要设置一个固定的宽度，可以更加灵活。

score 1 · Accepted Answer

#myElemId {
    width: 100px;
}

注意固定宽度；margin: auto这对工作至关重要。如果这不能解决它，那么其他地方肯定有问题。

编辑：你还需要这个（jQuery）：

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

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

4 回答 4