입력 요소의 수직 중심 텍스트

Question

다음과 같은 입력 요소가 있습니다 (예제에는 필요하지 않은 속성을 의도적으로 생략했습니다).

<input type="text" style="display: block; height: 40px; font-size: 14px; line-height: 40px"/>

Chrome 및 Internet Explorer (아마도 Opera)에서 입력 내부의 텍스트는 수직 중앙에 있습니다. 그러나 Firefox는이 선언을 무시하는 것 같습니다. 설정 display: inline-block; 대신 또는 사용 vertical-align: middle; Firefox에는 영향을 미치지 않습니다.

나는 또한 상단 및 하단 패딩을 13px, 그리고 높이 14px, (글꼴 크기와 결합) 요소가 발생합니다. 40px 키가 큰. 이것은 예상대로 작동합니다. 꼬리가있는 문자를 제외하고 g, 큐, 제이 등)은 바닥에서 잘린다.

고정 된 높이의 입력 상자에 수직 정렬 텍스트를위한 크로스 브라우저 솔루션을 찾고 있습니다. 입력 요소는 자체 호버 및 포커스 스타일을 갖기 때문에 요소 자체를 40px 키 큰 공간은 실제로 옵션이 아닙니다.

건배

Answer 1

또한 상단 및 하단 패딩을 13px로 설정했으며 높이를 14px로 설정하려고 시도했으며 (글꼴 크기와 결합) 키가 40px가됩니다. 이것은 예상대로 작동합니다. 꼬리가있는 문자 (g, q, j 등)가 바닥에서 잘린다.

상단 패딩 만 13px (하단이 아님)로 설정하고 나머지 공간으로 높이를 설정하는 방법은 다음과 같습니다.

<input type="text" style="display: block; height: 27px; padding-top: 13px; font-size: 14px">

Firefox와 Chrome에서 예상대로 작동합니다. 나는 현재 IE에 액세스하지 못했지만 IE에서도 작동한다고 확신합니다.