텍스트와 이미지를 정렬합니다

Question

중앙에 18px 높이의 이미지를 옆에 텍스트와 정렬하고 싶습니다. 다음은 내가 사용하는 코드입니다.

<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle;">Some text here
</div>

이 코드를 사용하면 DIV 컨테이너는 18px 대신 19px 높이로 렌더링되며 텍스트는 이미지를 중심으로하지 않습니다. Safari 4와 Firefox 3.6에서 시도했습니다. 그 1 px의 이유는 무엇입니까?

감사

Answer 1

1. 스타일을 재설정하는 것을 잊지 마십시오 (마진/패딩) : div, img, span {margin : 0; 패딩 : 0; 국경 : 0}
2. 수직 정전이 작동하려면 요소가 있습니다 ~ 해야 하다 나 인라인.
3. 수직으로 텍스트를 정렬하는 고전적인 선택은 컨테이너와 동일한 선 높이를 제공하는 것입니다.

예를 들어 :

<div><img src="somepic.jpg" style="height:18px; vertical-align:middle;"><span style="line-height:18px;">Some text here</span></div>

Answer 2

어딘가에 어딘가에 테두리가있을 수도 있고 너비가 0으로 설정되어야합니까?

Answer 3

나는 여기에 문제가 무엇인지 이해하는 것이 확실하지 않지만 이미지가 원하는 위치에서 몇 픽셀이라면 이미지를 상대적으로 배치하지 않는 이유는 무엇입니까? 예를 들어:

<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle; position: relative; bottom: 2px;">Some text here
</div>

이것은 원래의 위치에서 이미지를 2px로 바꿀 것입니다.