Question

我正在开发应用的导航栏。根据谷歌的材料设计建议，我已经为我的导航按钮提供了具体的测量结果。

现在我想在列表中的锚点内垂直对齐一个图标和一个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来测试它。无法弄清楚我做错了什么。我也尝试在锚元素上设置垂直对齐，但没有运气。

Answer 1

.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/

Answer 2

您可以让<ul>拥有display: table;，然后将.navItem设为display: table-cell;，然后就可以vertical-align: middle;设置.navItem你想要的。

请参阅此fiddle。

否则，flexbox会很好。

Answer 3

在line-height:56px;

中添加li

＆＃13;

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

＆＃13;

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

＆＃13;

vertical-align：中间不工作图标，跨越锚点

3 个答案: