Html 如何将导航栏集中在页面顶部的中间位置？

我在互联网上发现了这个非常棒的导航栏模板，但现在我在定位导航栏时遇到了麻烦。我想要在屏幕顶部中间的那个酒吧。到目前为止，我所尝试的一切都没有奏效

这是我的代码：

HTML:

---

在CSS中内置了一个选项

#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}

只需将

align center

类添加到包装div

@导入url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu，
#cssmenu ul，
#cssmenu ul li，
#cssmenu ul li a{
保证金：0；
填充：0；
边界：0；
列表样式：无；
线高：1；
显示：块；
位置：相对位置；
框大小：边框框；
}
#cssmenu：之后，
#cssmenu>ul:之后{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}
#cssmenu{
宽度：自动；
边框底部：3px实心#000000；
字体系列：Raleway，无衬线；
线高：1；
}
#cssmenu ul{
背景：#ffffff；
}
#cssmenu>ul>li{
浮动：左；
}
#cssmenu.align-center>ul{
字号：0；
文本对齐：居中；
}
#cssmenu.align-center>ul>li{
显示：内联块；
浮动：无；
}
#cssmenu.align-right>ul>li{
浮动：对；
}
#cssmenu.align-right>ul>li>a{
右边距：0；
左边距：-4px；
}
#cssmenu>ul>li>a{
z指数：2；
填充：18px25px25px；
字体大小：15px；
字体大小：400；
文字装饰：无；
颜色：#4444；
过渡：所有。2轻松；
右边距：-4px；
}
#cssmenu>ul>li.active>a，
#cssmenu>ul>li:悬停>a，
#cssmenu>ul>li>a:悬停{
颜色：#ffffff；
}
#cssmenu>ul>li>a:之后{
位置：绝对位置；
左：0；
底部：0；
右：0；
z指数：-1；
宽度：100%；
身高：120%；
边框左上半径：8px；
边框右上角半径：8px；
内容：“；
过渡：所有。2轻松；
变换：透视（5px）旋转（2deg）；
变换原点：底部；
}
#cssmenu>ul>li.active>a：之后，
#cssmenu>ul>li:悬停>a:之后，
#cssmenu>ul>li>a:悬停：之后{
背景#d7d7d7；
}

@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu {
  width: auto;
  border-bottom: 3px solid #000000;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu ul {
  background: #ffffff;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right > ul > li > a {
  margin-right: 0;
  margin-left: -4px;
}
#cssmenu > ul > li > a {
  z-index: 2;
  padding: 18px 25px 12px 25px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: #444444;
  transition: all .2s ease;
  margin-right: -4px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #ffffff;
}
#cssmenu > ul > li > a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  content: "";
  transition: all .2s ease;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}
#cssmenu > ul > li.active > a:after,
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li > a:hover:after {
  background: #d7d7d7;
}

#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}