html - 如何垂直对齐包含标题和图标图像的水平列表？

Question

我正在尝试创建一个水平导航栏，其中每个菜单选项的标题下方都有一个图标。当您将鼠标悬停在每个选项上时，该 block 的背景颜色会发生变化，并且尺寸会略有增加。我已经使用百分比确定了所有内容的大小。在我不得不垂直对齐菜单选项之前，这一切都在进行中。列表高度是导航栏的 100%。为了垂直对齐每个选项，我将显示更改为 table/table-cell 而不是有效的 inline-block，但是现在列表下方有一个很薄的空间，并且每个列表项不再占据 100% 的导航高度破坏悬停背景颜色效果。

Here是显示导航栏外观的屏幕截图。我已将列表背景设为粉红色以清楚地显示问题，但通常没有颜色只留下绿色背景。悬停在“学习”按钮上的蓝色框应该延伸到导航栏的边缘，就像我更改显示之前一样。

Here是显示 li 显示设置为 inline-block 时的样子的屏幕截图。这几乎正​​是我想要的，只是它不是垂直对齐的。

这是我的html的简化版(我去掉了标题和不相关的细节)

<nav class="nav_bar">
    <span id="logo">
        <a href="home.html"><img src="images/nav_bar/logo_img.png"></a>
        <a href="home.html"><img src="images/nav_bar/logo_text.png"></a>
    </span>
    <ul class="nav_menu">
        <li id="learn"><a href="learn.html">LEARN<br><img src="images/nav_bar/learn.png"></a></li
        ><li id="watch"><a href="watch.html">WATCH<br><img src="images/nav_bar/watch.png"></a></li
        ><li id="share"><a href="share.html">SHARE<br><img src="images/nav_bar/share.png"></a></li
        ><li id="more"><a href="more.html">MORE<br><img src="images/nav_bar/more.png"></a></li
        ><li id="active"><a href="home.html">HOME<br><img src="images/nav_bar/home.png"></a></li>
    </ul>
</nav> 

这是我的相关CSS

.nav_menu {
    display: table;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 35%;
    list-style-type: none;
}
.nav_menu img {
    width: 70%;
}
.nav_menu li {
    display: table-cell;
    height: 100%;
    width: 20%;
    vertical-align: middle;
    overflow: hidden;
}
.nav_menu a {
    display: table-cell;
    height: 100%;
    width: 100%;
    text-align: center;
    font-size: 1.5vw;
    text-decoration: none;
}
.nav_menu a:hover {
    transform: scale(1.1);  
}

#learn a:hover {
    background-color: #69D1ED;
}

我也曾短暂地尝试过使用图标作为列表背景图片，但我很难将它们放在文本下方。

这是一项作业，所以我仅限于 html 和 css，并且它必须适用于 Chrome、Safari、Firefox、Internet Explorer 和 Opera。

Answer 1

您需要这样的东西吗？

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}
 
.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 60px;
  border-bottom: 1px solid #888;
}
 
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
 
.nav a:hover {
  background-color: #005f5f;
  transform: scale(1.1);  
}
 
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
 
@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }
 
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }

  /* Options 2 - Float
  .nav li {
    float: left;
  }
  .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
  }
  .nav {
    background-color: #444;
  }
  */
}

<div class="nav">
  <ul>
    <li class="home"><a href="#">Home</a></li>
    <li class="tutorials"><a class="active" href="#">Tutorials</a></li>
    <li class="about"><a href="#">About</a></li>
    <li class="news"><a href="#">Newsletter</a></li>
    <li class="contact"><a href="#">Contact</a></li>
  </ul>
</div>

Demo is over here