부트 스트랩 : 큰 로고가있는 로고 탐색 모음

로고가 으로 표시되도록 설정하고 navbar 위의 중심에을 표시합니다. 어떤 도움이라도 대단히 감사하겠습니다. 여기 부트 스트랩 : 큰 로고가있는 로고 탐색 모음

코드입니다 : https://jsfiddle.net/ou51rksb/1/

<body class="home"> 
    <!-- wrapper --> 
    <div id="wrapper" class="win-min-height"> 
     <header id="block01g" class="header block background01" zp-module="Header"> 
      <div class="container header_block"> 
       <a class="navbar-brand" href="#"> 
        <img class="blacklogo img-responsive" src="images/logob.png" alt="Bañuelos Refrigeration Services"> 
        <img class="whitelogo img-responsive" src="images/logob.png" alt="Bañuelos Refrigeration Services"> 
       </a> 
      </div> 
     </header> 
    </div> 
</body>

출처

2017-01-18 user3226760

답변이 도움이됩니다. 의견을 보내주세요. – ab29007

이 CSS를

#block01g .navbar-brand { 
    display: block; 
    float: inherit; 
    margin: 0 auto; 
    padding-bottom: 0; 
    padding-right: 0; 
    text-align: center; 
    width: auto;//you add width for logo 
}

출처

2017-01-18 11:06:47

내가 단순히 로고를 중심으로 한이와 시도 교체하십시오, 이것은 당신이 필요로하는 무엇인가?

.navbar-brand { 
    display: block; 
    float: none; 
    font-size: 18px; 
    height: auto; 
    margin: 0 auto; 
}

http://jsfiddle.net/ou51rksb/12/

출처

2017-01-18 11:12:09

navbar-brand에 대한 사용 position:absolute;. CSS에 다음을 추가하십시오.

.header_block{ 
    position:relative; 
    padding:0; 
    padding-top:45px; 
} 
.navbar-brand{ 
    position:absolute; 
    top:0; 
    left:50%; 
    height:70px; 
    transform:translate(-50%,0); 
} 
.navbar-brand img{ 
    height:100%; 
    margin:0 auto; 
    display:block; 
    margin-bottom:100px; 
}

여기에 fiddle이 있습니다. 당신은 당신의 몸의 꼭대기에 약간의 패딩을 두었습니다. 당신은 그것을 제거 할 수 있습니다. 그러면 로고가 상단에 정렬됩니다.

출처

2017-01-18 11:12:51 ab29007

고마워요. 시체의 맨 위에있는 패딩을 제거 할 장소를 말해 줄 수 있습니까? – user3226760

나는 당신의 스타일에 중심을 두었지만 여전히 큰 사이즈로 표시 할 수는 없다. 어쩌면 패딩이 제거되면 올바르게 표시됩니다. – user3226760

죄송합니다. 이해가되지 않습니다. 현재 코드를 피델 레이션으로 설정할 수 있습니까? – ab29007

부트 스트랩 : 큰 로고가있는 로고 탐색 모음

답변

관련 문제