Вертикально центрировать текст в элементе ввода

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 , q , j и т. д.), обрезанных внизу.

Я ищу кросс-браузерное решение для вертикального выравнивания текста в поле ввода с фиксированной высотой. Элемент ввода будет иметь свои собственные стили наведения и фокуса, поэтому имитация центрирования путем позиционирования самого элемента по вертикали в пространстве высотой 40px на самом деле не вариант.

Приветствия

Answer 1

Я также пытался установить верхний и нижний отступы на 13 пикселей, а высоту на 14 пикселей, что (в сочетании с размером шрифта) приведет к росту элемента на 40 пикселей. Это работает как ожидалось; за исключением символов с хвостами (например, g, q, j и т. д.), которые обрезаются внизу.

Как насчет установки только верхнего отступа на 13 пикселей (не нижнего) и установки высоты на оставшееся пространство, например так:

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

Работает как положено в Firefox и Chrome; В настоящий момент у меня нет доступа к IE, но я вполне уверен, что он работает и в IE.