ウェブサイトのロゴとヘッダーをnavbarと縦に整列する方法

Question

navbarを私のウェブサイトのロゴとヘッダーに垂直に整列させようとしていますが、、、、およびタグにはdisplay: inline-block;とvertical-align: middle;を使用しようとすると私のウェブサイトの上に同じdiv）、navbarは私が望むものではない水平から垂直に行く。私はまた、ブートストラップ4.

を使用していますと、ここに私のhtmlです：

<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です：

#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; 
} 

私は、ブートストラップ4と非常によくないんだけど、誰がどのように知っている場合私はブートストラップ4を使用して、ナビゲーションバー内のすべての要素を垂直方向に整列させるという目標を達成することもできました。それも素晴らしいでしょう。

Answer 1

私が間違っていない場合、ブートストラップグリッドには「フロート」スタイルがあります。 col-md-4とcol-md-8は浮動小数点を残します。したがって、floatの代わりにinline-blockを使用し、両方のdivの垂直方向の中間を与えます。あなたが見せている現在のHTMLを使用して、それはあなたが[ページヘッダー]の代わりに（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 
}