居中导航栏

Question

我正在学习css和js，我正在看这个漂亮的导航栏

http://codepen.io/atelierbram/pen/gCqDy

但是，当我在测试网站上进行设置时，我无法将导航栏置于中心位置。 text-align没有做任何事情，设置margin:auto;似乎也没有效果。这是怎么回事，我不能通过正常方式将导航栏置于中心位置？

Answer 1

在该示例中，#fancy-nav实际上向右浮动，宽度为50％。它出现以居中为中心，但它不是传统的居中方法。

要使用margin:auto方法，您需要为HTML元素添加一些宽度，例如：

#nav-wrap {
    width: 200px;
    margin: 0 auto;
}

当然，这个简单的例子消除了容器的动态大小，因此如果您正在寻找动态布局，那么它真的不是那么有用。有大量资源可用于动态定位动态div。

Answer 2

使用#fancy-nav将margin样式更改为margin:0 auto中间位置并删除float:right属性

#fancy-nav { 
    margin:0 auto;
    position: relative; 
  width: 50%;
}

检查here

Answer 3

添加此css

#fancy-nav{  
   display: table;
   margin: 0 auto;
   position: relative;
}