Senkrecht-Center Text in einem Eingangselement

Question

I das folgende Eingabeelement aufweist (I weggelassen Attribute bewusst, die für das Beispiel nicht notwendig waren):

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

In Chrome und Internet Explorer (wahrscheinlich Opera auch), einen beliebigen Text innerhalb der Eingabe wird vertikal zentriert. Allerdings scheint Firefox, diese Erklärung zu ignorieren. Setzen sie stattdessen display: inline-block; oder vertical-align: middle; verwendet, hat keine Wirkung in Firefox.

Ich habe auch versucht, die oben und unten Polsterungen Einstellung 13px und die Höhe zu 14px, die (mit font-size kombiniert) führt in einem Element 40px hoch. Dies funktioniert wie erwartet; außer beliebige Zeichen mit Schwänzen (wie g , q , j usw.) ist an der Unterseite abgeschnitten.

Ich bin für eine Cross-Browser-Lösung für vertikal Text in einem Eingabefeld mit einer festen Höhe ausrichten. Das Eingangselement wird seine eigenen schweben hat und Stile konzentrieren, so die Zentrierung vorgetäuscht durch die Positionierung des Elements selbst vertikal in einem 40px hohen Raum ist nicht wirklich eine Option.

Prost

Answer 1

  

Ich habe auch versucht, die oben und unten Polsterungen auf 13px Einstellung und die Höhe auf 14px, die (mit font-size kombiniert) in einem Element 40px hoch führt. Dies funktioniert wie erwartet; außer beliebigen Zeichen mit Schwänzen (wie g, q, J usw.) sind an der Unterseite abgeschnitten.

Wie wäre es nur die obere Polsterung 13px (nicht die untere) und Einstellen der Höhe auf den verbleibenden Raum, wie diese Einstellung:

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

Es funktioniert wie in Firefox und Chrome erwartet; Ich habe Zugang zur Zeit nicht auf IE, aber ich bin sehr zuversichtlich, dass es in IE funktioniert auch.