センタリングブランドの画像をnavbarに入れます

Question

私は恥ずかしがり屋で何か助けが必要です。私は研究しており、良い解決策を考え出すことはできません。私が達成したいのは、画面が小さくてもアイコンが途中にあることです。

デスクトップから見ると、ブランドは左側に大きなロゴ、右側にはリンクとボタンが表示されます。

小さな画面で見ると、右側のボタン、左側のメニューを切り替える、ブランドのアイコンをデバイスの幅に合わせてセンタリングします。アイコンを左に移動しようとしました：50ピクセル。それはいつも応答的ではありません。

私のコードサンプルは以下のリンクにあります。私は最終画像ではなくGoogleで見つけたこれらの画像を使用しています。

私はすべてのデバイスが異なる画面サイズを持っていることを知っていますが、私は正常に1つを行うことができれば、他のものを管理することはできますか？

https://jsfiddle.net/irvgonz/mku4enff/2/

<!-- Work on this new nav --> 
 
<nav role="navigation" class="navbar navbar-default navbar-fixed-top" width="100%" height="" id="navbar"> 
 
    <div class="container"> 
 
    <!-- Brand Logo--> 
 
    <div class="navbar-header pull-left hidden-xs"> 
 
     <a class="navbar-brand" href="#"> 
 
     <img id="logo" alt="Brand" src="http://www.underconsideration.com/brandnew/archives/facebook_2015_logo_detail.png" /> 
 
     </a> 
 
    </div> 
 
    <div class="navbar-header pull-left visible-xs-block"> 
 
     <a class="navbar-brand" href="#"> 
 
     <img id="icon" src="https://image.freepik.com/free-icon/facebook-symbol_318-37686.png" /> 
 
     </a> 
 
    </div> 
 
    <!-- Donate Button stays outside the menu pulldown--> 
 
    <div class="navbar-header pull-right"> 
 
     <ul class="pull-left"> 
 
     <button id="btn" type="button" class="btn btn-default navbar-btn"> <b>button</b> </button> 
 
     </ul> 
 
     <!-- Place for the menu collapse--> 
 
     <button id="togglebtt" type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed"> 
 
     <span class="glyphicon glyphicon-menu-hamburger"></span> 
 
     </button> 
 
    </div> 
 
    <!-- Rest of Menu --> 
 
    <div class="collapse navbar-collapse pull-right"> 
 
     <!-- once open and collapsed items will be on left --> 
 
     <ul class="nav nav-pills pull-left"> 
 
     <li class="header-nav"> 
 
      <a href="#" class="header-nav" id="mission"> <b>our Mission</b> </a> 
 
     </li> 
 
     <li class="header-nav"> 
 
      <a href="#" class="header-nav" id="join"> <b>join us</b> </a> 
 
     </li> 
 
     <li class="header-nav hidden-sm"> 
 
      <a href="#" class="header-nav" id="about"> <b>the team</b> </a> 
 
     </li> 
 
     <li class="header-nav hidden-sm"> 
 
      <a href="#" data-toggle='modal' class="header-nav" id="contact"> <b>CONTACT US</b> </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 1

https://jsfiddle.net/up6kcu5q/1/

position: absoluteを使用すると、この場合には

@media (max-width: 767px) { 
    .container > .navbar-header.visible-xs-block { 
    position: absolute; 
    left: 50%; 
    -webkit-transform: translateX(-50%); 
     -moz-transform: translateX(-50%); 
     -ms-transform: translateX(-50%); 
     -o-transform: translateX(-50%); 
      transform: translateX(-50%); 
    } 
} 

を働くだろうあなたはまだ形容詞する必要があります途中でブレークポイントを忘れてしまいます。

これが役に立てば幸いです