type = image의 입력을 type = text의 입력으로 수직 정렬하기위한 휴대용 HTML/CSS?

Question

나는 수평 레이아웃, 그래서 같은 양식을 시도하고 있습니다 :

<form id="foo" name="foo" method="post" action="fooaction"> 
    <p>Enter a foo: 
     <input type="text" id="fooText" name="fooText"value=""/> 
     <input type="image" name="yes" id="fooSubmitYes" value="1" src="yes.png" title="Yes" width="24" height="24"/> 
    <input type="image" name="no" id="fooSubmitNo" value="0" src="no.png" title="No" width="24" height="24"/> 
    </p> 
</form> 

내가 가진 문제는 첫번째 입력, 텍스트 상자, "는 foo를 입력 :"물론 텍스트와 정렬이다, 다른 두 입력은 텍스트 상자에 매우 잘 맞지 않습니다. 그들은 약 7 픽셀이 너무 높습니다. 이러한 모든 요소의 여백 및 패딩은 0으로 설정됩니다.

이미지 입력에 align = "middle"을 추가하면 12 픽셀 아래로 이동하므로 5 픽셀이 너무 낮아 내 마음이 움직이지 않습니다. 좀 더 혼란스럽게도, CSS vertical-align 속성은 입력 요소에 영향을 미치지 않으므로 (무시합니다) CSS에서이를 수정하는 방법을 상상해보십시오.

캡션, 입력 텍스트 상자 및 가로 레이아웃과 일관된 세로 맞춤을 가진 두 개의 이미지 제출 양식을 만드는 브라우저 휴대용 방법을 알고 있습니까? 그렇지 않다면 Firefox에서 작동하는 것을 해결할 것입니다 :) (내 사용자의 95 %).

Answer 1

이 추가 다음 <input type="image"> 요소에

style='vertical-align: bottom' 

는 파이어 폭스와 IE 나에게 좋아 보인다.

이렇게하면 이미지의 아래쪽 가장자리가 입력 상자의 아래쪽 가장자리와 맞 춥니 다.

(기본적으로 너무 높습니다. 인라인 이미지의 하단 가장자리가 텍스트의 기준선과 일치합니다. 아래의 틈은 텍스트 디엔더 (q, p, g 등)를 수용하기위한 것입니다. .)

"CSS 수직 정렬 속성이 입력 요소에 영향을 미치지 않습니다."라는 말이 무슨 뜻인지 잘 모르겠지만 제게는 효과가 있습니다. 아마도 다른 문제가 있었기 때문일 수 있습니다.