css - 导航高度和填充

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