만들기 DIV 수직 중심

Question

나는 수직으로 중심을 부트 스트랩 <header>의 사업부를 정렬하기 위해 노력하고있어하지만이 작동하지 않습니다 (방문 JSFiddle 링크를 아래로 투표를하기 전에하십시오!) : 나는 navbar-search DIV 버튼을 제거하면

<div style="display: table-cell; height: 50px; vertical-align: middle;"> 
    <button type="button" class="btn btn-default navbtn"> 
     <span class="glyphicon glyphicon-leaf"></span> 
    </button> 
    <button type="button" class="btn btn-default navbtn" > 
     <span class="glyphicon glyphicon-cog"></span> 
    </button> 
    <div id="navbar-search"> 
     <button type="button" class="btn btn-default navbar-search-btn" > 
      <span class="fa fa-search"></span> 
     </button> 
     <input type="search" class="navsearch" /> 
    </div> 
</div> 

있습니다 벌금.

JSFiddle : http://jsfiddle.net/maysamsh/Rp94k/1/

참고 : 검색 컨테이너 display:inline-block;이 있고 상단에 충실하게, 나는 그것을 제거 할 수 없습니다.

Answer 1

HTML

<header class="navbar"> 
     <div class="container-fluid expanded-panel"> 
      <div class="row" dir="rtl"> 
       <div class="col-sm-5"> 
        3 

       </div> 
       <div class="col-sm-2"> 
        2 
       </div> 
       <div class="col-sm-5"> 
        <div style="display: table;"> 

         <button type="button" class="btn btn-default navbtn"> 
          <span class="glyphicon glyphicon-leaf"></span> 
         </button> 
         <button type="button" class="btn btn-default navbtn" > 
          <span class="glyphicon glyphicon-cog"></span> 
         </button> 
         <div id="navbar-search" style="display: table-cell;"> 
          <button type="button" class="btn btn-default navbar-search-btn" > 
           <span class="fa fa-search"></span> 
          </button> 
          <input type="search" class="navsearch" /> 
         </div> 
        </div> 
       </div> 
      </div> 

     </div> 
    </header> 

CSS

.navbar{ 
    background-color:#fff; 
    border-bottom:#eee solid 1px; 
} 
.navbtn { 
    font-size:large; 
    margin-left: 5px; 
} 
.navsearch{ 
    text-align: right; 
    -webkit-border-radius: 15px 0 0 15px; 
    border-radius: 15px 0 0 15px; 
    outline: none; 
    background: #eee; 
    cursor: inherit; 
    display:inline-block; 
    border:none; 
    padding:5px; 
    height:35px; 
} 
#navbar-search{ 
    display:inline-block; 
    float:none; 
    margin-top:10px; 
} 
.navbar-search-btn{ 
    -webkit-border-radius: 0 15px 15px 0; 
    border-radius: 0 15px 15px 0; 
    display:inline; 
    float:right; 
    border:none; 
    background: #eee; 
    height:35px; 

} 

바이올린 : http://jsfiddle.net/monzoor/TC9UH/1/

Answer 2

단추에 수직으로 맞추려면 단추에 .navbar-btn을 추가해야합니다. 자세한 내용은 Bootstrap Docs을 참조하십시오.

의미 론적으로 탐색의 경우 탐색 HTML5 요소에 있어야합니다. 어쨌든, 열이 너무 넓어서 아이콘을 아래로 밀고 있습니다 (너비의 100 %를 차지하는 열은 다른 것을위한 공간을 남기지 않습니다).

는 부트 스트랩 꽤 많이베이스를 사용하여 Fiddle 참조

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-6"> 
      <div class="row"> 
      <div class="col-sm-5">1</div> 
      <div class="col-sm-2">2</div> 
      <div class="col-sm-5">3</div> 
      </div> 
     </div> 
     <div class="col-sm-6 navbar-right"> 
      <div class="row"> 
     <div class="col-sm-8"> 
      <form class="navbar-form navbar-right" role="search"> 
       <div class="input-group"> 
        <input type="text" class="form-control" placeholder="Search" name="q"> 
         <div class="input-group-btn"> 
          <button class="btn btn-default" type="submit"> 
           <i class="glyphicon glyphicon-search"> 
           </i> 
          </button> 
         </div> 
        </div> 
       </form><!--/form--> 
      </div><!--/form column--> 
      <div class="col-sm-4"> 
       <button type="button" class="btn btn-default navbtn navbar-btn"> 
        <span class="glyphicon glyphicon-leaf"></span> 
       </button> 
       <button type="button" class="btn btn-default navbtn navbar-btn" > 
        <span class="glyphicon glyphicon-cog"></span> 
       </button> 
      </div><!--/buttons column--> 
      </div><!--/row column--> 
     </div><!--/right column--> 
     </div><!--/row--> 
    </div><!--/container--> 
</nav> <!--/nav-->