vertical-align：中間不能在圖標上工作，在錨內跨越

我正在爲應用程序的導航欄工作。遵循谷歌的材料設計建議，我爲我的導航按鈕提供了特定的測量。vertical-align：中間不能在圖標上工作，在錨內跨越

現在我想垂直對齊列表中我的錨內的圖標和span元素。

這是我的鏈接如下所示：

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

我似乎無法得到vertical-align: middle工作。

我做了一個jsfiddle來測試它。無法弄清楚我做錯了什麼。我試圖設置錨元素上的垂直對齊，但沒有運氣。

來源

2016-12-06 Miha Šušteršič

添加line-height:56px;會表解決這個問題？在這些情況下，表格通常更合作。 –

是否嘗試添加此CSS：'.navText {display：block; }' – Banzay

這裏是一個更新的[小提琴]（https://jsfiddle.net/hzsbgqk3/1/）...你拼錯的高度' – zgood

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

}

我用Flexbox的，請參見下面的更新小提琴。

https://jsfiddle.net/qcpwev6e/

來源

2016-12-06 18:22:39 MrGood

你可以讓你<ul>有display: table;，然後讓你的.navItem是display: table-cell;那麼你就可以在你的.navItem設置vertical-align: middle;像你想要的。

看到這個fiddle。

否則flexbox會很好。

來源

2016-12-06 18:31:06 zgood

在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>

來源

2016-12-06 18:43:45 jafarbtech

vertical-align：中間不能在圖標上工作，在錨內跨越

回答

相關問題