Question

我的导航栏无法与页面中心对齐。实际上我添加的任何代码来改变每个链接之间的边距也是行不通的，idk为什么会这样。我的位置是绝对的，因为我无法找到任何其他方法让导航栏出现在我背后的背景/幻灯片中（此处未显示）。我加了一个小提琴。此外，我尝试制作一个透明的中心导航栏，让我的下一个元素落后于它，但我无法做到。

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

我尝试将导航栏居中时使用的一种简单方法是在.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 2

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

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

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

Answer 3

最好为char grade(double score, double m, double s) { if (score < (m - 1.5 * s)) { return 'F'; } if ((m - (1.5*s)) <= score < (m - (0.5 * s))) { return 'D'; } if ((m - (0.5 * s)) <= score < (m + (0.5 * s))) { return 'C'; } if ((m + (0.5 * s)) <= score < (m + (1.5 * s))) { return 'B'; } if ((m + (1.5 * s)) <= score) { return 'A'; } else { return 'X'; } }选择器添加CSS规则。因为#navbar的规则会影响具有.nav类的所有HTML元素。使用.nav选择器，规则只会影响具有该ID的特定div。尝试删除#navbar的规则并添加：

.nav

调整链接之间的边距：

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

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

我的导航栏无法与页面中心对齐？

3 个答案: