2016-11-05 4 views
2

탐색 모음이 있지만 일부 클래스를 세로로 정렬하는 방법을 모르겠습니다. 부트 스트랩을 사용합니다. 탐색 바는 고정 된 위치입니다. 탐색 모음은 3 행으로 나뉩니다. 검색 행은 OK이지만 다른 행을 세로로 정렬 할 수는 없습니다. 여기 이 탐색 모음을 세로로 정렬하려면 어떻게해야합니까?

는 HTML입니다 :

   <div class="col-sm-10" > 
        <p>Reményik Tudástár</p> 
       </div> 
      </div> 
     </div> 
    </div> 

     <div class="col-sm-4 navbar-search vertical-align"> 
      <div class="container-fluid"> 
       <div class="row vertical-align"> 
        <div class="col-sm-1"></div> 
         <div class="col-sm-9" style="padding: 0;"> 
          <input type="text" name="search" class="navbar-search-input" placeholder="Keresés"> 
         </div> 

         <div class="col-sm-1" style=""> 
          <button class="navbar-search-button"><i class="fa fa-search"></i></button> 
         </div> 
        <div class="col-sm-1"></div> 
       </div> 
      </div> 
     </div> 

    <div class="col-sm-4 navbar-login" style=""> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-sm-10"> 
        <p style="float: right;">Bejelentkezés</p> 
       </div> 

       <div class="col-sm-2"> 
        <span class="fa fa-sign-in fa-2x"></span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

을 여기에 CSS입니다 :

.navigation-bar { 
    background-image: url("../img/nav_background.png"); 
    padding: 15px; 
    box-shadow: 0px 2px 5px #999999; 
} 

.navbar-search-input { 
    width: 100%; 
    border: 0; 
    border-radius: 3px 0 0 3px; 
    height: 35px; 
    padding: 10px; 
} 

.navbar-search-button { 
    background-color: #203138; 
    color: #fff; 
    margin-right: 100%; 
    border: 0; 
    border-radius: 0 3px 3px 0; 
    height: 35px; 
    padding-left: 12px; 
    padding-right: 12px; 
} 

로고와 cim 클래스를 어떻게 수직으로 정렬 할 수 있습니까?

답변

1

이 시도 : -

display: inline-block; 
    *display: inline; 
    vertical-align: middle;