ブートストラップ：大きな中心のロゴnavbar

ロゴをのように表示したいのですが、それはnavbarの上にを大きく中心にしています。どんな助けでも大歓迎です。ここでブートストラップ：大きな中心のロゴnavbar

<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

私は単にあなたのロゴを中心としてきたこれにしてみてください

#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

このCSSを交換してください、これは何が必要でしょうか？

.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

ブートストラップ：大きな中心のロゴnavbar

答えて

関連する問題