如何使用CSS中心导航栏？

Question

我很难将导航中心放在我为客户制作的草稿上。

以下是链接http://cjdrafts.info/germanserviceshop/

请帮助谢谢。

Answer 1

我不是专业人士，仍在学习编码，并找到了解决问题的方法。

我所做的是评论浮动左边的.menu-wrapper

#Top_bar .menu_wrapper {
  /* float: left; 
  z-index: 201;*/
}

然后定义650px宽度并将左右边距设置为自动

.header-stack #Top_bar .menu_wrapper {
  clear: both;
  margin: 0 auto;
  width: 650px;
}

Answer 2

1. 为width
设置menu_wrapper

#Top_bar .menu_wrapper {
    z-index: 201;
    width: 650px;
    margin: auto;
}

删除float，设置固定width并设置margin: auto。

1. display: inline-block
使用float代替li

#Top_bar .menu > li {
    margin: 0;
    z-index: 203;
    display: block;
    display: inline-block;
}

和

#Top_bar .menu_wrapper {
    float: left;
    z-index: 201;
    width: 100%;
    text-align: center;
}

为父级设置100% width并使用text-align: center。

Answer 3

感谢您的帮助。

在浏览器上进行编辑它确实有效，但出于某种原因我将css代码放在主题样式表中。没有什么工作，我尝试了两种解决方案。

似乎有什么问题？我已经在这至少7天了。

我实际上有一个使用菜单插件的解决方案，但这将是我的最后一个选择。