粘性导航不会对齐中心

Question

导航栏似乎位于我的 15 英寸笔记本电脑的中央。但是当我在 27 英寸 mac 上查看它时，它会向左浮动并且偏离中心。我不太确定如何将其居中，因此它似乎在所有显示器上都居中。

.navContainter{
    width: 960px;
}
.nav {
    height:60px;
    background-color: rgba(0, 0, 0, 0.7);
    position: -webkit-sticky;
    list-style-type: none;


}


.nav ul {
    float: left;
    margin: 0 auto;
    padding-left: 0px;
    padding-top: 10px;

}


ul{
    display: inline;
    padding: 0;





}

li{
    display:inline;
    padding:5px;
    font-size: 1.5em;
    float: left;
    margin-right: 50px;
    margin-left: 100px;
    position: relative;
    font-family: "Josefin Slab",serif;

}



a{
    width:60px;
    color: #fff;

}



.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}

<head class="navContainer">
<nav class="nav">


        <ul>
          <li><a href="web.html">WEB</a></li>
          <li><a href="photo.html">PHOTOGRAPHY</a></li>
          <li><img src="img/demo/_small/logo.png"></li>
          <li><a href="design.html">DESIGN</a></li>
          <li><a href="video.html">VIDEO</a></li>

        </ul>
        </nav>

Answer 1

对于 .nav 添加 text-align: center;

对于 .nav ul 删除 float: left; 并添加 display: inline-block;;

粘性导航不会对齐中心

Sticky Navigation will not align center

javascript

html

css

navigation

sticky