vertical-align：アイコン上で作業していない、アンカーの内側に広がっている

Question

私は、アプリケーションのナビゲーションバーで作業しています。私は、Googleの重要なデザインの推薦に続いて、ナビゲーションボタンの特定の測定値を思いつきました。

ここでは、リスト内のアンカー内のアイコンとスパン要素を垂直に整列させたいと考えています。私はちょうどvertical-align: middleが動作するように見えることはできません

<li class="navItem"> 
    <a> 
     <i class="navIcon material-icons md-light">info</i> 
     <span class="navText">About</span> 
    </a> 
    </li> 

：

これは私のリンクがどのように見えるかです。

jsfiddleを試してみました。私が間違っていることを理解できません。私は、アンカー要素に垂直方向の整列を設定しようとしましたが、運はありません。

Answer 1

.navItem { 
    display: inline-flex; 
    min-width: 56px; 
    max-width: 82px; 
    width: 33.3%; 
    height: 56px; 
    align-items: center; 
    justify-content: center; 

}

私は、以下の更新フィドルを参照して、フレキシボックスを使用していました。

https://jsfiddle.net/qcpwev6e/

Answer 2

あなたの<ul>がdisplay: table;を持っていると、あなたの.navItemがdisplay: table-cell;あなたが望んでいたように、あなたがあなたの.navItemにvertical-align: middle;を設定することができますこと作ることができます。

このfiddleを参照してください。

それ以外の場合はフレックスボックスが良いでしょう。表は、この問題を解決するだろう

Answer 3

はli

.navbar { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 

 
ul { 
 
    text-align: center; 
 
} 
 

 
.navItem { 
 
    display: inline-block; 
 
    min-width: 56px; 
 
    max-width: 82px; 
 
    width: 33.3%; 
 
    background: gray; 
 
    height:56px; 
 
    line-height:56px; 
 
}

<link type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> 
 

 
<link type="text/css" href="https://fonts.googleapis.com/css?family=Roboto" /> 
 

 
<ul class="navbar"> 
 
    <li class="navItem"> 
 
    <a> 
 
     <i class="navIcon material-icons md-light">info</i> 
 
     <span class="navText">About</span> 
 
    </a> 
 
    </li> 
 
    <li class="navItem"> 
 
    <a> 
 
     <i class="navIcon material-icons md-light">info</i> 
 
     <span class="navText">About</span> 
 
    </a> 
 
    </li> 
 
    <li class="navItem"> 
 
    <a> 
 
     <i class="navIcon material-icons md-light">info</i> 
 
     <span class="navText">About</span> 
 
    </a> 
 
    </li> 
 
</ul>