스프라이트 이미지 정렬 문제가 있습니까?

Question

span 태그에 스프라이트의 이미지 중 하나를 표시했습니다. 스팬은 <div>, <li>, <p>과 같은 다른 요소 내부에 있습니다. 스팬의 부모 요소 인 텍스트 정렬은 가운데입니다.

부모 요소의 텍스트 내용이 올바르게 가운데 맞춤됩니다. 하지만 나는 에 스플라이트 이미지를 중심으로 스팬을 만들 수 없습니다.

여기 샘플 코드가 추가되었습니다.

HTML 마크 업 :

<div align="center"><span class="cameraIcon spriteImage"></span>Some Text Content</div> 

스타일

span.cameraIcon { 
background-position: -240px 0; 
width: 24px; 
height: 24px; 
position: absolute 
} 

모든 제안은 감사 할 것이다.

감사합니다.

Answer 1

절대 위치 지정을 사용하면 span 태그가 더 이상 div 요소 내부의 텍스트 흐름에 포함되지 않으므로 텍스트 정렬의 영향을받지 않습니다.

display: inline-block; 스타일을 사용하여 span 요소를 여전히 텍스트 흐름의 일부인 블록 요소로 만들 수 있습니다. 그러나 일부 오래된 브라우저는 표시 값을 지원하지 않습니다.

Answer 2

스팬은 배경 이미지를 보여주는 것보다 다른 용도로 사용되지 않으므로 완전히 제거하고 부모에게 배경을 추가합니다. 요소 :

HTML :

<div class="cameraIcon spriteImage">Some Text Content</div> 

CSS :

.cameraIcon { 
    background-position: -240px center; 
}