웹 사이트 로고 및 헤더를 navbar에 수직으로 정렬하는 방법

Question

navbar를 내 웹 사이트 로고 및 헤더와 수직으로 정렬하려고하지만,, 및 태그에 display: inline-block; 및 vertical-align: middle;을 사용할 때마다 내 웹 사이트의 상단에있는 동일한 div) navbar는 내가 원한 것이 아닌 가로에서 세로로 이동합니다. 나는 또한 부트 스트랩 4

가 여기 내 HTML있어 사용하고 있습니다 : 사람이 방법을 알고 있다면이 아닌 부트 스트랩 4 아주 좋은 해요,하지만

#home { 
    background: url('../images/workshop-testphoto.jpg') no-repeat center/cover; 
    height: 844px; 
} 

.page-header { 
    background: rgba(0,0,0,.6); 
    postion: fixed;/*not working*/ 
    padding: 11px 0; 
} 

.page-header img, .page-header h1 { 
    display: inline-block; 
    vertical-align: middle; 
} 

.page-header img { 
    width: 88px; 
} 

.page-header h1 { 
    font-size: 32px; 
    color: white; 
    margin-left: 11px; 
} 

.page-header .nav { 
    float: right; 
} 

.page-header .nav li a { 
    display: inline-block; 
    font-size: 22px; 
    text-decoration: none; 
    color: #fff; 
} 

: 여기

<div id="home"> 
    <div class="page-header"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-4"> 
        <img src="images/test-logo.png"> 
        <h1>Rigid Signs</h1> 
       </div> 
       <div class="col-md-8"> 
        <ul class="nav"> 
         <li><a href="#home">Home</a></li> 
         <li><a href="#">Services</a></li> 
         <li><a href="#">Portfolio</a></li> 
         <li><a href="#">About</a></li> 
         <li><a href="#">Contact</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

와 나의 CSS의 부트 스트랩 4를 사용하여 내 탐색 막대의 모든 요소를 ​​수직으로 정렬하는 목표를 달성 할 수 있습니다. 그럴만 한 가치가 있습니다.

Answer 1

내가 잘못하지 않으면 부트 스트랩 눈금에 "부동"스타일이 적용됩니다. 그래서 col-md-4와 col-md-8은 플로트가 남을 것입니다. 따라서 float 대신 inline-block을 사용하고 두 div에 대해 세로 정렬 중간을 제공하십시오. 당신이 표시하고있는 현재의 HTML을 사용하여, 그것은 왜 [페이지 헤더] 대신 (HTTP에 [네비게이션 바 (http://getbootstrap.com/components/#navbar)를 사용하지 않는

.row { 
    font-size: 0; /*to remove blank space between two inline-block element*/ 
} 

.col-md-4, .col-md-8 { 
    float: none; 
    display: inline-block; 
    vertical-align: middle 
}