img 태그

좋아 라인 높이를 던지고, 그래서 이것은 CSS와 HTML의 일부입니다 :img 태그

CSS :

div { 
    height:24px; 
    line-height:24px; 
}

HTML : 이제

<div><img src="image.png"/>Text</div>

어떤 것을해야한다 (I를 think)는 24 픽셀 높이의 div이며 텍스트는 이미지 뒤의 div에서 세로로 정렬되어야합니다. 추신 이미지는 24x24 픽셀입니다. 그러나 라인 높이를 12px 정도로 너무 낮 춥니 다 (라인 높이를 12px로 줄이면 해결되지 않음). 그래도 이미지를 12x12 픽셀로 변경하면 텍스트가 올바른 위치에 저장됩니다. 이미지가 완전히 제거되면 텍스트가 올바른 위치에 있습니다. 나는 내 질문에 그것이 그것이 무엇인지, 그리고 그것을 해결할 수있는 이유는 무엇인가하는 것입니다.

감사합니다.

출처

2013-05-20 sharf

것은 IMG하는 vertical-align:middle주세요

div > img 
{ 
    float:left; 
    vertical-align:middle; 
}

Fiddle

출처

2013-05-20 22:34:56 PSL

텍스트를 수정했지만 내 이미지가 올바르게 정렬되지 않게되어 중간에 푸시 다운됩니다. 실제로 div의 일부가 중단됩니다. 편집 : 수정 사항을 세로로 정렬하면 제대로 표시됩니다 ... 이상하게 보입니다. – sharf

OK이 방법에 대해 http://jsfiddle.net/AFYfH/ – PSL

그냥'img {vertical-align : middle; }'([피들] (http://jsfiddle.net/7ZSxg/1/)) 작동하는 것 같습니다. 왜'float : left'도 추가 되었습니까? – doppelgreener

img에 수직 정렬을 추가하고 실험하여 원하는대로 만들 수 있습니다.

출처

2013-05-20 22:34:54 Morfie

간단한 (그러나 항상 최고의) 솔루션

img { vertical-align: bottom; }

인 이미지를 줄 높이를 포기하지 않는다; 오히려, 라인 박스의 높이가 line-height보다 커지게됩니다. 그 이유는 기본적으로 텍스트 기준선에 앉아있는 이미지 크기로 지정된 크기의 문자 인 것처럼 이미지를 처리하기 때문입니다. 따라서 이미지에는 이미지 자체의 높이에 텍스트 기준선과 글꼴의 아래쪽 사이의 거리를 더한 높이가 필요합니다.

CSS 용어에서 "텍스트 기준선에 앉음"은 기본 설정 인 vertical-align: baseline으로 인해 발생합니다. 이것을 수직 배치에 다른 효과를줌으로써 여러 가지 방법으로 오버라이드 할 수 있지만, 브라우저가 vertical-align의 구현에서 많은 버그를 가지고 있으며, bottom의 값은 너무 간단하여 아마도 올바르게 이해할 수 있습니다.

출처

2013-05-21 05:20:55

답변

관련 문제