오프셋 된 글 머리 이미지 UL

Question

정렬되지 않은 목록에서는 총알에 이미지를 사용하지만 글 머리 기호는 오른쪽 텍스트 아래쪽에 정렬되어 나타납니다. 텍스트 높이의 중앙에 배치하고 싶습니다. 총알에 오프셋을 추가하거나 CSS를 삽입 할 수있는 방법이 있습니까? 대신 당신이 background-image을 사용하고 background-position: 속성을 사용하여 총알을 배치 할 수 있습니다 list-style-image를 사용

<ul> 
    <li>item 1</li> 
    <li>item 2</li> 
</ul> 

ul 
{ 
    list-style-image: url('/images/bullet_blue_8x8.png'); 
} 

Answer 1

ul{ 
    margin:0; 
    padding:0; 
    list-style:none; 
    } 
li { 
    background:url("/images/bullet_blue_8x8.png") no-repeat 0 -2px; 
    padding-left:18px; 
    font-size:12px; 
    } 

Demo를 사용할 수 있습니다.

Answer 2

.

또는 당신이 원한다면, 당신은 또한 :before 의사

ul li { 
    background-image: url(http://www.tandf.co.uk/journals/society/images/icon_pdf.gif); 
    background-repeat: no-repeat; 
    padding-left: 20px; 
    margin-bottom: 10px; 
    background-position: 0 1px; /* X = 0 and Y = 1px */ 
} 

당신은 배경 이미지를 사용할 필요가