Html 导航对准问题

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

我能找到的关于我正在努力实现的最好的例子是。查看标题导航选择的导航。他们使用类似于我的气泡来覆盖“Jobs”链接，只是他们使用纯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;

---

您是否尝试过

文本对齐：居中

和

垂直阿尔金：中间

？你能用JSFIDLE添加一个演示吗？如果可以，不要使用图片。除非您需要很好地支持IE8和IE9，否则您可以制作外观更光滑的跨浏览器按钮