我制作了一个菜单条,我想将其固定在页面的底部中心。我什么都试过了。有没有办法在 CSS 中做到这一点?我已经在页面底部修复
了菜单底部:0px位置:固定
但使用
边距:自动自动 0px 自动或左边距:自动
似乎没有居中菜单。它只是粘在页面的左侧。任何想法将不胜感激!
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>
使用此解决方案,无需设置可以更灵活的固定宽度。
可以使用 50% 的左属性和等于页脚宽度一半的负左边距。
http://jsfiddle.net/N7MB5/
#footer {
width: 600px;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -300px;
}
要使元素居中,您需要指定宽度并将左右边距设置为自动。然后,要将这样的元素粘贴到页面底部,您需要将其包装在另一个具有固定宽度的元素中,例如 100% 并位于底部。是的,你可以。
<section style="position: fixed; bottom: 0px; width: 100%;">
<p style="margin: 0 auto; width: 300px;">Blah blah</p>
</section>
#myElemId {
width: 100px;
}
请注意固定宽度;这对于margin: auto
工作至关重要。如果这不能解决它,那么其他地方一定有问题。
编辑:你还需要这个(jQuery):
$("#myElemId").css({
left: window.innerWidth/2 - $(this).css("width")/2
});
这允许您将宽度设置为所需的任何内容,而无需更新CSS代码的其余部分。