왜 내 이미지가 페이지에서 너무 높습니까?

웹 페이지에 두 개의 버튼이 있습니다. 검색 버튼과 정렬하기 위해 지우기 버튼을 약간 낮추려고합니다. Clear 버튼이 너무 높은 이유는 무엇입니까? 여기 왜 내 이미지가 페이지에서 너무 높습니까?

라이브 예입니다 http://www.davidjpotter.com/temp/test.php

alt text

<table border=1> 
<tr> 
<td> 
    <button type="submit">Search</button> 
    <img src="../images/button-clear.png"> 
</td> 
</tr> 
</table>

출처

2011-01-23 davidjhp

HTML이 매우 잘못 형성되었습니다. 당신은 td와 tr에 대한 마감 태그가 필요하고 img는 자체 마감 –

참고로 stackoverflow에 코드를 입력 한 다음 강조 표시하고 "코드"버튼을 클릭하면됩니다. –

@Stefan : XML이 아닙니다. HTML에서 ''및 ''은 선택 사항이므로 여기에있는 HTML이 정확합니다. 이 말은 사람들 (그리고 아마도 HTML 파서)들이 당신을 포함 시키면 많은 도움을 주므로' '태그를 잊어 버렸는지 아무도 짐작할 수 없습니다. – cHao

을이 교체 :이와

<img src="../images/button-clear.png">

을 :

이것은 이미지의 수직 정렬과 관련이있다

<img src="../images/button-clear.png" style="vertical-align: bottom; ">

출처

2011-01-23 00:47:35 blake305

vertical-align CSS 속성의 기본값은 baseline이기 때문에 높은입니다. 이는 display: inline 인 모든 요소에 적용되며 여기에는 <img> 요소가 포함됩니다.

middle으로 설정하는 대신보십시오 :

<img src="../images/button-clear.png" style="vertical-align:middle" />

출처

2011-01-23 00:47:17

인라인 요소이며 기준선으로 설정됩니다. 'vertical-align : bottom'을 추가하여 줄을 정렬하십시오.

출처

2011-01-23 00:51:34 Rob

왜 내 이미지가 페이지에서 너무 높습니까?

답변

관련 문제