Google.com导航栏副本

Question

所以，我一直在构建我的投资组合，我选择的第一个项目是google主页的简单复制品。其他一切似乎都很好，但对于我的生活，我无法让导航栏元素垂直居中和对齐。我尝试使用不同的显示器，尝试在每个li但没有骰子的垂直对齐属性。 以下是代码：

validatorService.prototype.isValidName = (string)->
    regexp = validatorService.prototype.internationalLettersNumbers("{1,60}")
    return validatorService.prototype.isRegexpMatch(string, regexp)

#top_navbar {
  outline: none;
  margin: 10px 25px;
  float: right;
  font-size: 10%;
}

ul {
  vertical-align: middle;
  display: flex;
  direction: row-reverse;
  list-style-type: none;
  top: 30px;
}

li {
  display: inline-block;
  position: relative;
  float: right;
  margin-left: 15px;
}

i {
  color: black;
}

i.account {
  height: 200px;
}

a {
  text-decoration: none;
}

a.Images {
  font-size: 12px;
  color: black;
  vertical-align: bottom;
}

a.Gmail {
  font-size: 12px;
  color: black;
}

a:hover {
  text-decoration: none;
}

.material-icons.notifications {
  font-size: 18px;
  padding: 5px;
  color: white;
  background-color: grey;
  top: 30px;
  border-radius: 30px;
}

.material-icons.apps {
  font-size: 32px;
  color: grey;
}

.material-icons.account {
  font-size: 48px;
  color: grey;
}

Answer 1

尝试向line-height元素添加li。

li {
    line-height: 32px;
}