中心固定菜单，宽度未知

Question

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

有办法做到这一点吗？

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

Answer 1

阅读this。通过图表和演示回答大多数居中问题。

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

见这里：

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

Answer 2

只需创建一个包装div，并将其设置为fixed并将align设置为center。这应该会给你你想要的东西。

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