CSS에서 선의 높이를 계산하는 방법이 있습니까?

img가 텍스트 줄과 동일한 높이가되게하고 싶다고합시다. 이것을 설정하는 방법이 있습니까?CSS에서 선의 높이를 계산하는 방법이 있습니까?

  
<table> 
    <td> 
     <img src="pict.png" style="height: 1em"/> 
     <img src="pict.png" style="height: 1em"/> 
    </td> 
    <td> 
     The text<br/> 
     The second line<br/> 
    </td> 
</table>

그러나, 예제, 그림의 높이가 라인보다 작 : 내 첫번째 생각은 다음과 같이이었다. 몇 줄이 지나면 그 차이가 눈에 띄게됩니다. 누구든지 어떤 제안이 있습니까?

또한 내 글꼴 1.15 em이 줄 높이와 거의 같습니다. 누구에게도 이것이 의미가 있습니까?

출처

2010-11-29 GC_

1 그들을 사용하는 어떤 폰트 얼굴 소문자 m의 폭 : 이런 이미지가 라인 높이 및 폰트 크기 사이의 관계를 설명하는 데 도움 바란다. 참고로, 소문자 n 및 x 너비 인 FY 및 EX 값을 사용할 수도 있습니다 (FYI). – Metagrapher

@metagrapher 정말 필요한 것은 img의 높이로 사용하는 선의 높이입니다. Sebastian Patane Masuelli는 라인 높이를 설정했습니다. 이는 이미 설정 되었기 때문에 런타임에 라인 높이를 계산하거나 알 수 없다는 것을 의미합니다. –

나는 여전히 선 높이가 em에서 어떻게 설정 될 수 있는지 아직 이해하지 못했다. (위에서 설명한 것에 기반하여). 나는이 경우 전형적인 기본값 인 16px를 사용한다고 가정한다. 나에게 혼란 스럽거나 불분명 한 것 같습니다. – Metagrapher

이미지의 높이가 예제의 텍스트 행과 같습니다. (see it here). 프로젝트에서 다르게 보이는 경우 line-height: 1em을 테이블에 설정하고 font-size: 1em인지 확인하십시오. 두 번째 부분에 관해서

: alt text

출처

2010-11-29 20:49:29

고마워, 나는 그것이 효과가 있다고 생각한다. –

멋지다면 이미지 스타일에'vertical-align' CSS 선언을 적용 할 수도 있습니다 (예 :'vertical-align : middle'은 이미지를 텍스트 줄 중앙에 세로로 배치합니다.) –

텍스트
두 번째 줄

나는 수직 정렬을 확인합니다 –

JavaScript를 사용해야한다고 생각합니다.

출처

2010-11-29 20:43:23 simshaun

가능하면 HTML을 작성하기 전에 서버 측의 라인 높이를 조정하고 싶습니다. –

페이지가 표시된 후에 각 이미지의 크기를 조정하고 싶지 않습니다. –

나는 이것을 위해 자바 스크립트가 필요하다고 생각하지 않는다. –

CSS에서 선의 높이를 계산하는 방법이 있습니까?

답변

관련 문제