垂直對齊包含圖標的“之后”元素

Question

我有一個導航菜單，並且第一項用一個圖標替換了內容。 我這樣做是通過將主要元素的font-size設置為0px ，然后添加一個after元素來實現的。 這似乎是一種常見的做法，到目前為止效果很好。

但是我似乎無法將after元素與導航菜單的其余部分對齊。

我開始嘗試vertical-align line-height和vertical-align ，這vertical-align我離目標越來越近，但是如您所見，它仍然無法按預期工作。

小提琴可以在這里找到： https : //jsfiddle.net/67dyxLr1/

<nav class="nav-primary">
  <ul class="menu">
    <li class="menu-item home"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">Blog</a></li>
    <li class="menu-item"><a href="#">Contact</a></li>
    <li class="menu-item"><a href="#">About Us</a></li>
  </ul>
</nav>

這是我的CSS：

.nav-primary {
  background: #CCC;
}

.nav-primary li {
  list-style-type: none;
  display: inline-block;
  text-align: left;
  font-size: 26px;
  line-height: 0px;
}

.nav-primary a {
  display: inline-block;
  padding: 32px 20px;
  border: 1px dashed black; /* border only used for display purpose of alignment*/
  margin-right: -4px;
}

.nav-primary a:hover {
    background: #FFF;
}

.menu {
  width: 100%;
}

.menu-item {

}

.home a {
  font-size:0px;
}

.home a:after {
  font-family: "dashicons";
  content: " \f102";
  font-size: 40px;
  display: inline-block;
  vertical-align: middle;
  line-height: 0px;
}

Answer 1

只需添加vertical-align: middle在您的li vertical-align: middle

的CSS

.nav-primary li {
  list-style-type: none;
  display: inline-block;
  text-align: left;
  font-size: 26px;
  line-height: 0px;
  vertical-align: middle;
}

此處演示

Answer 2

您需要為li添加垂直對齊：

 .nav-primary { background: #CCC; } .nav-primary li { list-style-type: none; display: inline-block; text-align: left; font-size: 26px; line-height: 0px; vertical-align: middle; /* add this */ } .nav-primary a { display: inline-block; padding: 32px 20px; border: 1px dashed black; /* border only used for display purpose of alignment*/ margin-right: -4px; } .nav-primary a:hover { background: #FFF; } .menu { width: 100%; } .menu-item {} .home a { font-size: 0px; } .home a:after { font-family: "dashicons"; content: " \\f102"; font-size: 40px; display: inline-block; vertical-align: middle; line-height: 0px; } 

 <nav class="nav-primary"> <ul class="menu"> <li class="menu-item home"><a href="#">Home</a></li> <li class="menu-item"><a href="#">Blog</a></li> <li class="menu-item"><a href="#">Contact</a></li> <li class="menu-item"><a href="#">About Us</a></li> </ul> </nav>