정렬 목록 - 스타일 이미지 비례 텍스트

그래서 나는정렬 목록 - 스타일 이미지 비례 텍스트

<ul> 
    <li>Hello</li> 
</ul>

과 같습니다

li { 
    list-style-image: url(../img/bullet.png); /* 13x13 px */ 
    /* line-height: 13px; */ 
    /* vertical-align: middle; */ 
    padding-left: 5px; 
}

이 텍스트와 이미지 요소를 볼 수

enter image description here

같은 <li>의 이미지가 세로로 정렬되지 않았습니다 (이미지가 텍스트보다 높음).), 줄 높이 및 세로 맞춤 (코드 주석 처리)을 적용 해 보았습니다. 좋은 정렬을 달성 할 수있는 방법이 있습니까?

출처

2013-02-05 Ilja

패딩은 요소 안에있는 것 (텍스트 경우)에만 영향을 미칩니다.

사용할 수있는 위치 조정 속성은 list-style-position뿐입니다. 허용되는 값은 inherit, inside 또는 outside입니다. 가장 일반적인 방법은 사용하는 것입니다

list-style: none;

을 다음 <li>의 배경

li { 
    /** the image will be vertically aligned in the center **/ 
    background: url(../img/bullet.png) left center no-repeat; 

    /** move the text to the right **/ 
    padding-left: 20px; 
}

출처

2013-02-05 14:28:00 Teneff

no-repeat을 백그라운드 속성에 추가하는 것을 잊지 마십시오. – ctorx

만 목록 항목 당 한 줄이있을 때 당신은 IMG 태그 또는 배경 정의 할 수 li 요소

출처

2013-02-05 14:19:05

이 그것을 시도 할 수 있습니다/ – Ilja

일부 padding-bottom을 추가 할 수 있습니다 : 홈페이지 (..) 대신 리튬 태그를 " list-style-image "

출처

2013-02-05 14:24:30 Paket2001

네,하지만 나는 좀 원하는 list-style-image로 그것을 알아 내라. – Ilja

나는 또한 배경 속성에 "더 반복"을 추가하지 필요에 따라 원하는 이미지를 적용

출처

2013-10-19 23:39:57 Levi

당신은 도움이되지 않았다,

<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>

출처

2015-02-20 12:45:24 Fanky

정렬 목록 - 스타일 이미지 비례 텍스트

답변

관련 문제