Centered логотип в панели навигации

Question

Ok, так что я сделал это naviagtion бар:

HTML: http://pastebin.com/Mgurej6L

CSS: http://pastebin.com/vA7b1dT6

Я хотел бы «Кодекс Единство» в середине моей навигационной панели, но Я попытался, но я не могу заставить его работать.

Любая помощь?

Answer 1

хорошо для того, чтобы сделать вашу навигацию в центре страницы вам нужно веревки ваш навигация в DIV так что я добавить DIV с класса.rope и вы стиль .rope{ display: flex; justify-content: center;} как в коде ниже:

/*Css Navigation code*/ 
 

 
.rope { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.unity-code-logo { 
 
    background-size: 100px 59px; 
 
    width: 50px; 
 
    height: 59px; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 460px; 
 
} 
 
.main-navigation { 
 
    display: inline; 
 
    font-family: ubuntu; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
} 
 
.main-navigation ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding-left: 0; 
 
} 
 
.main-navigation li { 
 
    color: #fff; 
 
    background: #181818; 
 
    display: block; 
 
    float: left; 
 
    margin: 0 2px 0 0; 
 
    padding: 12px; 
 
    position: relative; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
} 
 
.main-navigation li a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.main-navigation li:hover { 
 
    @include transition(background, 0.25s); 
 
    background: #453E3E; 
 
} 
 
.main-navigation ul li ul { 
 
    background: #181818; 
 
    visibility: hidden; 
 
    float: left; 
 
    min-width: 150px; 
 
    position: absolute; 
 
    transition: visibility 0.65s ease-in; 
 
    margin-top: 12px; 
 
    left: 0; 
 
    z-index: 999; 
 
} 
 
.main-navigation ul li:hover > ul, 
 
.main-navigation ul li ul:hover { 
 
    visibility: visible; 
 
} 
 
.main-navigation ul li ul li { 
 
    clear: both; 
 
    padding: 5px 0 5px 18px; 
 
    width: 100%; 
 
} 
 
.main-navigationul li ul li:hover { 
 
    background: #74b7e4; 
 
} 
 
.navbar-brand { 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    text-align: center; 
 
    margin: auto; 
 
}

<div class="rope"> 
 
    <!--Navigation Bar--> 
 
    <nav id="navigation" class="main-navigation" role="navigation"> 
 
    <ul class="navigation-menu-main"> 
 
     <li><a href="#" class="navigation-menu-main-item">Home</a> 
 
     </li> 
 
     <li><a href="#" class="navigation-menu-main-item">Store</a> 
 
     </li> 
 
     <li><img src="http://mt.google.com/vt/icon?color=ff004C13&name=icons/spotlight/spotlight-waypoint-b.png" style="height:10px;"></li> 
 
     <li><a href="#" class="navigation-menu-main-item">Projects</a> 
 
     <ul> 
 
      <li><a href="#" class="navigation-menu-main-item sub-navigation-menu">Connect</a> 
 
      </li> 
 
      <li><a href="#" class="navigation-menu-main-item sub-navigation-menu">Alpha</a> 
 
      </li> 
 
      <li><a href="#" class="navigation-menu-main-item sub-navigation-menu">XXXX</a> 
 
      </li> 
 
      <li><a href="#" class="navigation-menu-main-item sub-navigation-menu">XXXX</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div>

Также div(.rope) по умолчанию широтно100%, так что если вы хотите, чтобы дать ширина для веревки ДИВ вам нужно добавить margin: 0 auto; к (.rope) в стиле. Просто добавьте <img> в другой <li></li>, но потому что у вас его нет, так что не будет посередине, он может быть правильным или левым, иначе будет с серединой <li></li> для магазина под словом.

Сообщите мне, что вам нужно?