如何在水平列表中垂直居中项目符号？

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的建议：将padding-top添加到3像素使它们在IE 8、IE9和良好的浏览器上看起来更或多或少相同。但感觉有点hacky，仍然不一致（在IE上，项目符号更靠上，在其他所有浏览器上，项目符号在底部（由于添加了padding-top）；

难道没有更好的CSS代码可以使项目符号与文本垂直对齐，而不需要进行像素级的调整吗？

预期的结果：

- MEM

Answer 1

也许你应该在 #main-navigation ul li a 中添加一些 padding-top:2px（或者3px），这样它可以在我的浏览器上正常工作，但没有在所有浏览器上检查过。

在这里检查：http://jsfiddle.net/ZnzYk/1/ 嘿，我还有一个建议，不知道是否有用。 vertical-align: middle 在 w3schools 上你可以 尝试一下。

- Asif

---

这是一个字体问题。子弹确实对齐了。但字体本身没有对齐。:/ 加上填充使得它看起来好一些。唯一的解决方案是更改字体系列选择。我会接受您的答案作为合适的。干杯。 - MEM

由于这个问题似乎与字体生成有关，因此在这里没有垂直对齐会有所帮助。填充确实有用，所以我放弃了。;) 干杯。 - MEM