2つの画像が左右にあり、検索フィールドが中央にあるNavbar

Question

私は、ブートストラップでnavbarを作成しています。私は、左右に2つのイメージと検索フィールドを中央に持っていたいと思います。 navbarは、2つの画像の高さを持つ必要があります。検索フィールドは、ナビゲーションバーの中央に水平方向と垂直方向の両方に配置する必要があります。これは私の現在のコードです：

HTML：

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-4"> 
       <div class="navbar-header"> 
        <img src="../images/Image1.png" width="280" height="80" alt=""> 
       </div> 
      </div> 
      <div class="col-sm-4" style="text-align: center"> 
       <form class="navbar-form navbar" role="search"> 
        <div class="input-group"> 
         <input type="text" class="form-control" placeholder="Suche" name="suche"> 
         <div class="input-group-btn"> 
          <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
         </div> 
        </div> 
       </form> 
      </div> 
      <div class="col-sm-4"> 
       <ul class="nav navbar-nav navbar-right"> 
        <img src="../images/Image2.jpg" width="330" height="80" alt=""> 
       </ul> 
      </div> 
     </div> 
    </div> 
</nav> 

CSS：

.navbar-form{ 
    padding-top: 13px; 
} 

私はもっと巧みにそれを行うことができますか？特に、検索フィールドを中央に縦と横に配置することは？

Answer 1

これは非常に簡単では、フレックスボックスを通じて行う

.navbar { 
 
\t display: flex; 
 
\t justify-content: space-between; 
 
\t align-items: center; 
 
}

<div class="navbar"> 
 
    <div class="img"> 
 
    \t <img src="http://placehold.it/150x150" alt=""> 
 
    </div> 
 
    <div class="search"> 
 
    \t <input type="text"> 
 
    \t <input type="submit" value="Ok"> 
 
    </div> 
 
    <div class="img"> 
 
    \t <img src="http://placehold.it/150x150" alt=""> 
 
    </div> 
 
    </div>