CSS (가상 이미지 요소)의 수직 위치 지정

Question

:before 유사 요소를 사용하여 내 사이트의 다운로드 링크에 작은 이미지를 추가하고 있습니다. 이미지의 높이가 줄의 높이보다 크고 이미지의 아래쪽이 텍스트의 맨 아래에 정렬됩니다.

의사 요소의 수직 정렬을 어떻게 바꿀 수 있습니까? 이상적으로 이미지의 중심이 텍스트의 중심과 정렬됩니까?

Answer 1

이미지 만들기 inline elment, 행의 높이를 설정하고 세로 정렬을 컨테이너에 설정하십시오.

Answer 2

우아한 해결책을 찾을 수 없습니다.

http://jsfiddle.net/rcravens/pAcDE/

다음과 같은 요소를 감안할 때 :

<div id='elem'>Bob Cravens</div> 

나는이 CSS가 :

#elem:before{ 
    content: ''; 
    height: 160px; 
    width: 136px; 
    background: url('http://bobcravens.com/Content/images/author_thumb.png'); 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
#elem{ 
    background-color: red; 
    margin: 60px 136px; 
} 

: 여기 jsFiddle가 작동 솔루션을하기 전에 당신이 무엇을 아마 'position : absolute'스타일을 제외하고는. 그런 다음 원본 div를 상쇄하기 위해 여백을 사용했습니다.

희망이 도움이됩니다.

밥

Answer 3

나는이 텍스트와 이미지로 한, 대부분의 경우에 작동 찾을 방법을 알아 규모입니다

#elem:before 
{ 
    content: url(image.png); 
    position: relative; 
    bottom: -.5ex; 
    margin-right: .5em; 
} 

margin-right이 사이에 공간을 조금 넣는다 이미지와 텍스트.