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：中间不能在图标上工作，在锚内跨越

回答

相关问题