如何将徽标图像置于引导固定导航的中间？

Question

我正在尝试使用bootstrap创建一个网站，而我之前使用过bootstrap。这次我正在制作一个带有固定导航的网站，标志将位于导航链接的中间。我也希望徽标位于导航链接的顶部。

此图片会显示什么，我试图做的：

我现在的代码是这样的：

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #fff; 
 
    color: #000; 
 
    font-size: 14px; 
 
    font-family: 'Helvetica', serif; 
 
} 
 

 
.navbar { 
 
    background: none; 
 
    border: none; 
 
    margin-top: 20px; 
 

 
} 
 

 
.container-fluid { 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
    margin-left: -40px; 
 
} 
 

 
.navbar ul li { 
 
    display: block; 
 
    text-align: center; 
 
    float: left; 
 
    width: 20%; 
 

 
} 
 

 
.fourth-color { 
 
    background-color: #ffecec; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
} 
 

 
.third-color { 
 
    background-color: #122212; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
} 
 

 
.second-color { 
 
    background-color: #aaa; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
} 
 

 
.first-color { 
 
    background-color: #f25727; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
}

<!-- Start of Nav Bar --> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <ul> 
 
     <li class="first-color"><a href="#">First</a></li> 
 
     <li class="second-color"><a href="#">Second</a></li> 
 
     <li><a href="#">Logo</a></li> 
 
     <li class="third-color"><a href="#">Third</a></li> 
 
     <li class="fourth-color"><a href="#">Fourth</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

当我试图链接一个图像，它不适合，并与整个导航栏螺丝。任何帮助表示赞赏！

Answer 1

在这里你的问题是你只有在有类的li上填充。 （这就是为什么说标志的锚不居中是因为它没有填充类）

ex。

.navbar ul li { 
    display: block; 
    text-align: center; 
    float: left; 
    width: 20%; 
} 

.fourth-color, .third-color, .second-color, .first-color { 
    padding-top: 30px; 
    padding-bottom: 30px; 
} 

将填充应用于所有列表，并且问题已修复。

.navbar ul li { 
    padding-top: 30px; 
    padding-bottom: 30px; 
} 

至于中间的标志。您必须使用position relative，然后将其他样式添加到该类中，或者在我的例子:nth-child中添加样式，如下所示。

@import url("http://fonts.googleapis.com/css?family=Raleway&subset=latin,latin-ext"); 
 

 
html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #fff; 
 
    color: #000; 
 
    font-size: 14px; 
 
    font-family: 'Helvetica', serif; 
 
} 
 

 
.navbar { 
 
    margin-top: 1em; 
 
    text-align: center; 
 
} 
 

 
.navbar ul { 
 
    padding: 0; 
 
    text-decoration: none; 
 
    list-style: none; 
 
} 
 

 
.navbar li { 
 
    display: block; 
 
    float: left; 
 
    width: calc(20% - 1px - 0.906752000000002em); 
 
    padding: 1.16em 1em; 
 
    font: 100 21px "Raleway", sans-serif; 
 
    background: #000; 
 
    color: #fff; 
 
    opacity: 1; 
 
    transition: all 0.1s linear; 
 
} 
 

 
.navbar li:nth-child(1) { 
 
    background: #ff410e; 
 
} 
 

 
.navbar li:nth-child(2) { 
 
    background: #f4ca00; 
 
} 
 

 
.navbar li:nth-child(3) { 
 
    background: #fff; 
 
    color: #000; 
 
    border: 1px solid #000; 
 
    border-radius: 2.84em; 
 
    padding: 1.76em 0; 
 
    width: 20%; 
 
    position: relative; 
 
    margin: -0.64em -2.16em; 
 
    z-index: 1; 
 
} 
 
.navbar li:nth-child(3) a { 
 
    color: #000; 
 
} 
 

 
.navbar li:nth-child(4) { 
 
    background: #99d81b; 
 
} 
 

 
.navbar li:nth-child(5) { 
 
    background: #00abf3; 
 
} 
 

 
.navbar li:hover:not(:nth-child(3)) { 
 
    opacity: 0.7; 
 
} 
 

 
.navbar a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
.navbar .active { 
 
    text-decoration: underline; 
 
}

<!-- Start of Nav Bar --> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <ul> 
 
     <li><a class="active" href="#">First</a></li> 
 
     <li><a href="#">Second</a></li> 
 
     <li><a href="#">Logo</a></li> 
 
     <li><a href="#">Third</a></li> 
 
     <li><a href="#">Fourth</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

除非你打算创建一个下拉列表，我不建议使用列表此菜单栏。而不是you can just style the anchors to fit your needs。 （请记住保留您的代码DRY）：