Navbar左右两个图像和中间的搜索字段

Question

我使用Bootstrap创建了一个导航栏。我想在左边和右边有两个图像，中间有一个搜索栏。导航栏应该有两个图像的高度。搜索字段应该位于导航栏中心的水平和垂直位置。这是我当前的代码：

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>