我的导航栏不会与页面中心对齐？

Question

我的导航栏不会与页面中心对齐。事实上，我添加的任何用于更改每个单独链接之间的边距的代码也不起作用，我知道为什么会这样。我将位置设为绝对位置，因为我找不到任何其他方式让导航栏位于背景/我身边的幻灯片前面（此处未显示）。我已经包括了一个小提琴。我还尝试制作一个透明的居中导航栏，让我的下一个元素在它后面，但我做不到。

https://jsfiddle.net/ep93zz08/

HTML：

   <div id="navbar" class="li flex-container nav row">
            <a class="nav-link flex-item " href="index.html">PHOTOGRAPHER</a>
            <a class="nav-link flex-item" href="#">PORTFOLIO</a>
            <a class="hplogo-a flex-item " href="idex.html"><img id="logo" src="http://www.dynamicaudiovideo.com/_Media/samsung_logo_large.jpeg" alt=""></a>
            <a class="nav-link flex-item" href="Investment.html">INVESTMENT + FAQ</a>
            <a class="nav-link flex-item" href="#">BLOG</a>
        </div>

CSS:`

body{
    margin:0;
    overflow-x: hidden;
    font-family: Calibri;
    font-style: normal;
    font-variant: normal;
  background:black;

}

.nav{
    position: absolute;
    list-style-type: none;
    display: inline;
    z-index: 2;
    text-align: center;

}

.resize-anchor{
    display: inline-block;
    height: auto;
    width: 300px;
}
.hplogo-a{
    display: inline-block;
    height: auto;
    width: 200px;
    min-width: 200px;
}

a:hover{
    color:#D1946F;
    text-decoration: none;
}

a:link{
    color:#D1946F;
    text-decoration: none;
}

.navlink, .hplogo-a{
    text-align: center;
    display:inline-block;
    margin-left: 50px;
    margin-right: 50px;
    padding:0;
}
.nav-link{
    color:white;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    font-family: Calibri;
    font-size: 18px;
    font-style: normal;
    font-variant: normal;
    line-height: 26.4px;
    margin-top: 20px;
}

.sticky {

    position: fixed;
    top: 0;
    width: 100%
    z-index: 3;
}
.li{
    text-align: center;

}

.flex-container {
    display: flex;
    display: -webkit-flex;
    -webkit-align-items: center;
    align-items: center;
}

.flex-item {
    margin: 5px;
}

img{
    width: 100%;
}
`

Answer 1

最好为#navbar选择器添加CSS规则。因为.nav 的规则将影响所有具有.nav 类的HTML 元素。使用 #navbar 选择器，规则只会影响具有该 id 的特定 div。尝试删除.nav 的规则并添加：

#navbar {
    position: relative;
    list-style-type: none;
    z-index: 2;
    justify-content: center;
}

调整链接之间的边距：

#navbar a {
  margin-right: 20px;
}

https://jsfiddle.net/ep93zz08/8/

Answer 2

我在尝试使导航栏居中时使用的一种简单方法是在 .li 或 ul.li 下使用以下内容：

    margin-left: auto;
    margin-right: auto;

或者您可以使用以下内容并添加自己的耀斑：

 #nav {
       width:750px;
       margin:0 auto;
       list-style:none;
}
#nav li {
       float:left;
}
#nav a {
       display:block;
       text-align:center;
       width:150px; /* fixed width */
       text-decoration:none; 
}

用下面的html来跟进：

<ul id="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">CAPABILITIES</a></li>
  <li><a href="#">ABOUT US</a></li>
  <li><a href="#">RFQ</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>

Answer 3

您可以将此样式添加到导航栏 ID。

  left:50%; transform:translateX(-50%);

您应该查看一些 CSS，因为您在导航栏 ID 上使用绝对位置，然后在同一个 div 的 flex-container 类上显示 flex。看起来您正在尝试使用两种不同的方法使 div 居中。