html - 导航对齐问题

我有一个精灵，由4个气泡组成，将用于所选版本的导航，如下所示：



我能找到的最好的例子是Dribbble。查看标题导航，选择导航。他们使用类似于我的气泡来覆盖“作业”链接，但他们使用纯CSS来实现外观，而我使用的是图像。

这是我的代码：

.inline-block{
  /* Inline block class for li navigation */
  display:-moz-inline-stack;
  display:inline-block;
  zoom:1;
  *display:inline;
}
#header li a{
  width:40px;   /* without padding = 110px*/
  height:15px;  /* without padding = 31px*/
  padding:8px 35px;
}
#header li a.selected{
  background: url('../img/btn-header-sprite.png') 0 -1px;
  display:inline-block;
}
#header li a{
  color:#FFF;
  font-weight:bold;
  font-size:15px;
}
#header li:hover{
  background-position:0 -34px;
}
#header li:active{
  background-position:0 -67px;
}

现在看起来像这样：


我必须分别将每个填充对齐，并且如您所见，如果填充不正确，则文本不会位于气泡的中心。是否有比单独给每个气泡填充填充更好的格式化方式？

感谢所有帮助！如果您需要更多说明，请说！

最佳答案

你可以试试

display:table-cell;
vertical-align: middle;

关于html - 导航对齐问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14824670/