이 세로로 배치 된 글 머리 기호를 가로 목록에 고정하는 방법은 무엇입니까?

나는 이것을 약 5 시간 동안 이미 시험해보고 있으며, 나는 정말로, 정말로 거짓말을하고있다. :의이 세로로 배치 된 글 머리 기호를 가로 목록에 고정하는 방법은 무엇입니까?

전체 코드는 검증 W3C이다.

내가 국경 반경을 사용하여 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>

나는 일관성하지만 모든 것을 얻을. :( 가 지금처럼 나는 그것이 더 많거나 적은 정말 유지하면 신경 쓰지 있지만, 모든 이상, 그 차이를 보이지 않는

업데이트 :.

아시프 제안 후 : 패딩 정상를 추가 ~ 3px는 Internet Explorer 8, IE9 및 좋은 브라우저에서 다소 비슷하게 보였습니다.하지만 약간의 해킹과 여전히 일관성이없는 것처럼 느껴졌습니다 (IE의 경우 총알이 맨 위, 다른 모든 것은 총알이 바닥에 있습니다. 때문에) 패딩 정상은 추가로,

수직 텍스 정렬 총알이 더 나은 CSS 코드가 아닌가요 t, px 조정으로 px가 필요하지 않습니까?

의도 된 결과 :

the intended result