ブートストラップ：navbarの中のアイテム

Question

私はlink1、link2を水平方向と垂直方向の中央に配置しようとしています。私は水平部分が機能するようにしましたが、私が何を垂直にしようとしても何も変わりません。

HTMLコード：

 <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <!-- <%= link_to 'Home', root_path %> --> 
     </div> 

     <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <!-- <li><%= link_to 'Home', root_path %></li> --> 
      <li>Link 1</li> 
      <li>Link 2</li> 
     </ul> 
    </div> 

    </div> 
</nav> 

CSSコード：

.navbar .navbar-nav 
    display: inline-block 
    float: none 
    vertical-align: middle 

.navbar .navbar-collapse 
    text-align: center 

/* link */ 
.navbar-nav > li 
    margin: 3px 
    text-transform: uppercase 
    font-weight: bold 
    color: white 

私はこの仕事を得るにはどうすればよいですか？そして、私はブートストラップを使うべきか、CSSを使ってすべてを開発すべきだと思いますか？

Answer 1

あなたのCSSにこれを追加します。

.navbar-nav { 
    width: 100%; 
    text-align: center; 
    background: red; 
} 
.navbar-nav>li { 
    float: initial; 
    line-height: 150px; 
} 
.nav>li { 
    display:inline-block; 
} 

line-heightは、ブロックの中心にそれらを作るliの高さです。あなたが望んでいたことを願っています。ここで

はbootplyです：

Answer 2

.navbar-nav>li { 
    height: 100px; 
    line-height: 100px; 
    margin: auto; 
    text-align :center; 
} 

.navbar-nav > li span { 
    vertical-align: middle; 
    display: inline-block; 
    line-height: 1.2em; 
} 

<div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <!-- <li><%= link_to 'Home', root_path %></li> --> 
      <li><span>Link 1</span></li> 
      <li><span>Link 2</span></li> 
     </ul> 
    </div>