목록 스타일 이미지의 정렬

Question

list-style-image의 가로 및 세로 정렬을 결정하는 방법이 있는지 궁금합니다.

순간, 그것은 다음과 같이 보입니다 때문에 :

_리스트 TEXT

과 내가이

– 목록 텍스트처럼

덕분에 많은 싶습니다!

Answer 1

당신은 예를 들어, 접근 방법의 몇 가지를 시도 할 수 있습니다

ul.basic { 
    list-style: none; 
    list-style-image: url(http://placehold.it/20x20); 
    margin: 0 0 0 0; 
} 
ul.basic li { 
    margin: 1.00em 0 0 0; 
    padding: 0 0 0 0; 
} 

ul.bg-img { 
    list-style: none; 
    margin: 0 0 0 0; 
} 
ul.bg-img li { 
    background-image: url(http://placehold.it/20x5); 
    background-repeat: no-repeat; 
    background-position: left center; 
    margin: 1.00em 0 0 -30px; 
    padding: 0 0 0 30px; 
} 

첫 번째 경우에, 당신은 목록 이미지를 만들 수 있습니다 예를 들어 20x20 픽셀 크기의 사각형으로 이미지의 가운데에 하이픈을 삽입합니다. 그러나 글꼴 크기가 변경되면 목록 이미지가 li 요소의 기준선에 고정되므로 수직 중심 맞춤을 유지하지 않습니다.

두 번째 예에서는 목록 스타일을 해제하고 li 요소에 배경 이미지를 배치합니다. 하이픈을 이미지에 삽입하고 왼쪽과 가운데에 위치 시키십시오. 이 방법을 사용하면 li 요소의 왼쪽 여백과 패딩을 조정하고 background-position 속성을 사용하여 하이픈 모티브의 위치를 ​​일부 제어 할 수 있습니다. http://jsfiddle.net/audetwebdesign/JKZLe/

Answer 2

이것은 웹킷과 모질 리아에서 각각 제어되지만, <ul>과 <ol> 요소에 대한 규칙은 -webkit-padding-start과 -moz-padding-start입니다. 그것은 padding-left에 의해 오버라이드 될 수 있습니다 (이것은 IE에서도 잘 동작 할 것입니다).

<h3>Using a list-style-image</h3> 
<ul class="basic"> 
    <li>Hello!</li> 
    <li>Good-Bye!</li> 
    <li>See you later!</li> 
</ul> 

<h3>Using a Background Image on li</h3> 
<ul class="bg-img"> 
    <li>Hello!</li> 
    <li>Good-Bye!</li> 
    <li>See you later!</li> 
</ul> 

을 다음과 같은 CSS를 보면 :

ul { 
    padding-left: 40px; 
}