导航高度和填充

Question

我制作了一个photoshop菜单，但我在CSS中转换它时遇到了问题。问题是我有时会多线，但不是！如果有人可以请求帮助！

这是我的CSS：

.training_nav {
  float: right;
}
.training_nav li {
  float: left;
}
.training_nav li.finances {
  background: url(img/finances_icon.png) center 35px no-repeat;
}
.training_nav li a {
  text-decoration: none;
  color: #818181;
  display: block;
  font-size: 15px;
  width: 140px;
  height: 40px;
  padding-top: 90px;
  text-align: center;
  text-transform: uppercase;
}
.training_nav li a:hover {
  background: rgba(255, 0, 0, 0.2);
}

http://jsfiddle.net/NeqYa/1/

非常感谢！

Answer 1

使用css属性display:table-cell确实有助于缓解您的vertical-align问题。这是一个更新的小提琴：

http://jsfiddle.net/NeqYa/3/

以下是使其有效的CSS：

.training_nav li a {
  text-decoration: none;
  color: #818181;
  font-size: 15px;
  width: 140px;
  height: 40px;
  padding-top: 90px;
  text-align: center;
  display:table-cell;
  vertical-align:middle;
  text-transform: uppercase;
}