如何將徽標圖像置於引導固定導航的中間？

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）：