센터 이미지를 부트 스트랩의 nav 헤더에 넣습니다. 4

Question

새로운 부트 스트랩 4 알파 프레임 작업으로 navbar 헤더를 만들었습니다.

<nav class="navbar navbar-light navbar-fixed-top pulse-header"> 
    <ul class="nav navbar-nav navbar-nav-left"> 
     <li class="nav-item"><a href="#" class="open-pulse-sidebar"><i class="ion-grid pulse-icons"></i></a></li> 
    </ul> 

    <ul class="nav navbar-nav float-xs-right"> 
     <li class="nav-item"><a href="#" class="toggle-search"><i class="ion-ios-search-strong pulse-icons"></i></a></li> 
     <li class="nav-item"> 
      <a href="#" class="open-notification-sidebar"> 
       <i class="ion-earth pulse-icons"></i> 
       <span class="pulse-circle"></span> 
      </a> 
     </li> 
     <li class="nav-item"><a href="#" class="open-chat-sidebar"><i class="ion-chatboxes pulse-icons"></i></a></li> 
    </ul> 
</nav> 

CSS

.pulse-header { 
    height: 60px; 
    min-height: 60px; 
    max-height: 60px; 
    background-color: #1f2532; 
    padding: 13px 15px; 
} 

.pulse-header .navbar-nav-left { 
    margin-left: 20px; 
} 

.pulse-header .nav > .nav-item { 
    margin-right: 20px; 
} 

.pulse-header .nav > .nav-item > a { 
    position: relative; 
} 

난에 넣어 때, 오른쪽에 내 아이콘이 원인이 로고는 네비게이션 바의 중심에 있지만 수행하는 방법을 모르는 싶은 아래로 이동.

bootply

Answer 1

당신은 CSS를 여기

나는 당신이 찾고있는 무슨을 달성하는 방법의 일 예는 하나의 블록이 필요합니다.

nav 막대의 자식으로 img 태그를 추가 한 다음 벨로우즈 코드로 설정했습니다.

이 시도 :

.navbar img { 
    display:block; 
    margin: 0px auto; 
} 

을 경우에 당신이 navbar을 채우는 시작할 때 로고가 더 이상 센터는 다음 로고

이 코드를 시도 할 또는이 시도 찾을 수 없음 :

#logo { 
    position: absolute; 
    left: 50%; 
    margin-left: -50px !important; /* 50% of your logo width */ 
    display: block; 
} 

이 방법은 자동으로 작동하지 않지만 로고를 오프셋하기 위해 내용이 일치하는 경우 작동합니다.

예제 : http://www.bootply.com/XVlsafgbzD