Как я могу поместить изображение логотипа в середину загрузочного бутстрапа?

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

Ваша проблема в том, что у вас есть только прописные буквы, которые имеют классы. (поэтому якорь, который говорит, что логотип не центрирован, состоит в том, что он не имеет класса с прокладкой)

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):