如何将这个垂直居中的子弹固定在水平列表上？

Question

我已经尝试了大约5个小时，而且我感觉非常非常虚拟。 ：■

整体代码经过w3c验证。

有问题的剪辑： http://jsfiddle.net/ZnzYk/

• 我尝试使用边框半径制作带有css的圆形项目符号;
• 我尝试过使用伪元素。
• 我尝试过使用精灵。

从IE8开始，子弹必须（或多或少）在文本的垂直中间，跨浏览器。

所以我放弃所有方法，我正在尝试使用背景图像。

CSS：

#main-navigation ul li {     
   display:inline; 
}

#main-navigation ul li a {     
   font-family: 'Miso', 'Helvetica Neue',Helvetica,Arial,sans-serif;  
   display: inline-block;        /*seems to help on IE*/
   font-size: 1.25em;     
   margin-right: 6%;     
   text-align: right;     
   text-transform: uppercase;     
   background: url('http://s7.postimage.org/fvy10uk1j/bullet.png') no-repeat 100% 50%;  
   padding-right: 4%;     
   text-decoration: none; 
}   
#main-navigation ul li a:hover {     
   color: #ED1E79;     
   text-decoration: none;     
   background: url('http://s7.postimage.org/puiznbth3/bullet_Selected.png') no-repeat 100% 50%; 
}

HTML

<div id="main-navigation"> 
   <ul>         
       <li><a href="">item 1</a></li>         
       <li><a href="">and this is item 2</a></li>         
       <li><a href="">item 3</a></li>     
   </ul> 
</div>

我得到的只是一致性。 :( 我不介意它是或多或少地保持真实，但至少，现在并没有那么不同。

更新

Asif建议后： 将填充顶部添加到3px使它们在IE 8，IE9和良好的浏览器上看起来或多或少相同。但它感觉有点hacky并且仍然不一致（在IE上的子弹它更多在顶部，在所有其他的子弹它在底部（由于添加了填充顶部）;

没有更好的CSS代码让子弹与文本垂直对齐，不需要px调整px吗？

预期结果：

Answer 1

您可能应该在padding-top:2px中添加一些3px（或#main-navigation ul li a）。

我的浏览器工作正常，但没有检查。

点击此处：http://jsfiddle.net/ZnzYk/1/

嘿，我还有一件事给你，我不知道它对你有帮助。

vertical-align: middle

在w3schools你可以play with it。