리스트 텍스트를 가운데 정렬하는 방법

"li"요소에 이미지을 사용하고 있습니다. 문제는 image.how 아래에 표시되는 텍스트로 텍스트를 목록 이미지의 가운데에 맞 춥니 다?리스트 텍스트를 가운데 정렬하는 방법

는 image http://www.freeimagehosting.net/uploads/c0e4ae8608.jpg

CSS는 다음과 같습니다

ul.mark{ 
list-style-image: url('bullet1.jpg'); 
}

HTML :

<ul class='mark'> 
    ... 
</ul>

출처

2010-01-06 ArK

어떻게 했습니까? 'list-style-image' 또는'background-image'를 통해? – Gumbo

list-style-image – ArK

대신 배경 이미지를 사용해보십시오. 상대 패딩/마진을 설정하면 트릭을 수행해야합니다.

그러나 사용자가 이미지를 사용하도록 설정하지 않은 경우 사용성 문제가 발생할 수 있다고 생각할 수도 있습니다.

출처

2010-01-06 10:18:24 chrr

:before을 사용하면 <li> 요소 앞에 이미지를 배치 할 수 있습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>Name of the page</title> 
     <meta http-equiv="content-type" content="text/html; charset=utf8"> 
     <style type="text/css"> 
      ul { 
       list-style: none; 
      } 
      li { } 
      li:before { 
       display: inline-block; 
       vertical-align: middle; 
       height: 64px; 
       width: 64px; 
       content: ' '; 
       background-image: url(bullet_64.png); 
      } 

     </style> 
    </head> 
    <body> 
     <ul> 
      <li>First</li> 
      <li>Second</li> 
      <li>Third</li> 
     </ul> 
    </body> 
</html>

글 머리 기호가 일반적으로 표시되는 왼쪽으로 더 배치해야하는 경우 여백을 추가하면됩니다.

IE8뿐 아니라 모든 최신 브라우저에서 작동합니다.

출처

2010-01-06 10:27:35 Atli

하지만 슬프게도 IE6과 7에서는 작동하지 않습니다. 따라서 현재 주류 사이트에 대한 질문에서 빠져 나옵니다. –

참. Microsoft에 맡겨 11 년 이상 기다렸다가 이와 같은 기본 기능을 지원하십시오. * -하지만 그건 나를 멈추게하지 않을거야. 나는 오랫동안 IE 문제를 해결하기 위해 멀리가는 것을 멈췄다. 사람들이 깨진 브라우저를 사용하려면 부러진 페이지를 보게하십시오. * (다행히도, 자영업 xD) * – Atli

리스트 텍스트를 가운데 정렬하는 방법

답변

관련 문제