javascript - 以未知宽度居中固定菜单

Question

我需要在页面顶部居中并固定一个菜单。菜单的内容是动态的，所以事先不知道它的宽度。我在网上找到的解决方案假设宽度是已知的，或者位置不固定。

有没有办法做到这一点？

欢迎使用 CSS 和 JavaScript 解决方案。

Answer 1

读这个。用图表和演示回答大多数中心问题。

在您的情况下，最简单的方法可能只是使用两个元素。在最外层的 div 上使用position: fixed和。text-align: center然后将居中的元素设置为display: inline。（当你这样做时，你必须小心字符空间。）

看这里：

http://codepen.io/pen/7169/1

Answer 2

只需创建一个包装器 div，并将其设置为固定并将对齐设置为居中。那应该给你你正在寻找的东西。

​<div style="position: fixed; top: 0; width: 100%;" align="center">
    <ul>
        <li>Menuitem</li>
        <li>Menuitem2</li>
    </ul>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​