Text innerhalb des Eingabefelds mit fester Höhe ohne Anzeige vertikal ausrichten: Tabelle oder Auffüllung?

Die Linienhöheneigenschaft sorgt normalerweise für die vertikale Ausrichtung, jedoch nicht für Eingaben. Gibt es eine Möglichkeit, Text automatisch zu zentrieren, ohne mit dem Auffüllen herumzuspielen?

In Opera 9.62, Mozilla 3.0.4, Safari 3.2 (für Windows) ist es hilfreich, wenn Sie Text oder mindestens ein Leerzeichen in dieselbe Zeile wie das Eingabefeld einfügen.

<div style="line-height: 60px; height: 60px; border: 1px solid black;">
    <input type="text" value="foo" />&nbsp;
</div>

(Stellen Sie sich ein & nbsp nach der Eingabe-Anweisung vor)

IE 7 ignoriert jeden CSS-Hack, den ich versucht habe. Ich würde empfehlen, Padding nur für IE zu verwenden. Sollte es Ihnen leichter machen, es richtig zu positionieren, wenn es nur in einem bestimmten Browser funktionieren muss.

Ich bin selbst auf dieses Problem gestoßen. Ich habe festgestellt, dass die Angabe einer Eingabehöhe, sondern die kombinierte Verwendung von Schrifthöhe und Abstand zu vertikal ausgerichtetem Text führt.

Angenommen, Sie möchten ein 42 Pixel großes Eingabefeld mit einer Schriftgröße von 20 Pixel. Sie können einfach den Unterschied zwischen der Eingabehöhe und der Schriftgröße ermitteln, durch zwei teilen und den Abstand auf diesen Betrag einstellen. In diesem Fall hätten Sie eine Gesamtpolsterung von 22 Pixel, was 11 Pixel auf jeder Seite entspricht.

<input type="text" style="padding: 11px 0px 11px 0px; font-size: 20px;" />

Das würde Ihnen ein 42px großes Eingabefeld mit perfekter vertikaler Ausrichtung geben.

Hoffentlich hilft das.

Ich habe es nicht selbst versucht, aber versuche es mit folgenden Einstellungen:

height : 36px; //for other browsers
line-height: 36px; // for IE

Wobei 36px die Höhe Ihrer Eingabe ist.

Ich weiß, dass ich zu spät zur Party komme, aber hoffentlich hilft dies jedem, der nach einer präzisen Antwort sucht, die in allen gängigen Browsern funktioniert (mit Ausnahme von IE6 haben wir beschlossen, diesen Browser nicht mehr zu unterstützen, sodass ich mich weigere, ihn überhaupt noch anzusehen). .

    #search #searchbox {
    height: 21px;
    line-height: 21px;
}

Prost! JP

Meiner Meinung nach ist die Antwort auf dieser Seite mit den meisten Stimmen die beste Antwort, aber seine Mathematik war falsch und ich konnte sie nicht kommentieren.

Ich brauchte ein Texteingabefeld mit einer Höhe von genau 40 Pixel und einem umlaufenden Rand von 1 Pixel. Natürlich wollte ich, dass der Text in allen Browsern vertikal in der Mitte ausgerichtet ist.

1 Pixel Rand oben
1 Pixel Rand unten
8 Pixel oben Polsterung
8 Pixel untere Polsterung
22 Pixel Schriftgröße

1 + 1 + 8 + 8 + 22 = genau 40 Pixel.

Eine Sache, an die Sie sich erinnern sollten, ist, dass Sie Ihre CSS-Höheseigenschaft entfernen müssen, sonst werden diese Pixel zu Ihrer obigen Summe hinzugefügt.

<input type="text" style="padding-top:8px; padding-bottom:8px; margin: 0; border: solid 1px #000000; font-size:22px;" />

Dies funktioniert in Firefox, Chrome, IE 8 und Safari. Ich kann nur davon ausgehen, dass wenn so etwas Einfaches in IE8 funktioniert, es in 6, 7 und 9 ähnlich funktionieren sollte, aber ich habe es nicht getestet. Bitte lassen Sie es mich wissen und ich werde diesen Beitrag entsprechend bearbeiten.

Gehen Sie für line-height.

Das vertical-alignTag funktioniert gut für die Senden-Schaltfläche, aber nicht für den Text im Eingabefeld. Das Einstellen line-heightder Höhe des Eingabefelds funktioniert in allen Browsern. Inkl. IE7.

Nach langem Suchen und Frust funktionierte für mich eine Kombination aus Einstellen von Höhe, Linienhöhe und ohne Auffüllen, wenn ein Hintergrundbild mit fester Höhe (24 Pixel) für ein Texteingabefeld verwendet wurde.

.form-text {
    color: white;
    outline: none;
    background-image: url(input_text.png);
    border-width: 0px;
    padding: 0px 10px 0px 10px;
    margin: 0px;
    width: 274px;
    height: 24px;
    line-height: 24px;
    vertical-align: middle;
}

input[type=text]
{
   height: 15px; 
   line-height: 15px;
}

Dies ist der richtige Weg, um die vertikale Mittelposition einzustellen.

Stellen Sie einfach nicht die Höhe des Eingabefelds ein, sondern nur die Schriftgröße, das ist in Ordnung

So mache ich es.

<ul>
   <li>First group of text here.</li>
   <li><input type="" value="" /></li>
</ul>

dann in Ihrer CSS-Datei,

ul li {
  display: block;
  float: left;
}

Das sollte für dich funktionieren.

Versuchen :

height: 21px;
line-height: 21px; /* FOR IE */

Da in einigen Versionen von IE (<9) die Eigenschaftshöhe nicht richtig interpretiert wird.

Spät zur Party, aber die aktuellen Antworten funktionieren nicht, wenn Sie Box-Sizing: Border-Box-Set haben (was heutzutage viele Leute für Formularelemente tun).

Setzen Sie einfach die Boxgröße für IE8 zurück, box-sizing: content-box;um eine der Antworten für Polsterung / Höhe zu verwenden.

Die innere vertikale Ausrichtung hängt von der Schrifthöhe und der Eingabehöhe ab, sodass sie mithilfe des Auffüllens angepasst werden kann !!!

Versuchen Sie einige wie:

.InVertAlign {
   height: 40px;
   line-height: 40px;
   font-size: 2em;
   padding: 0px 14px 3px 5px;
}

...

<input type="text" class="InVertAlign" />

Denken Sie daran, die Werte für die CSS-Klasse an Ihre Bedürfnisse anzupassen!

Ich habe gerade in den Texteingaben von MaterialUI daran gearbeitet. Das Hinzufügen padding-top: 0.5remzum Eingabestil hat bei mir funktioniert. Während dies die Polsterung anpasste, müssen Sie sich zumindest nicht um die Anpassung für Updates kümmern, geschweige denn um unterschiedliche Haltepunkte.

Sie sollten Ihren Titeltext entfernen und den Eingabeplatzhalter für den Titel Ihres Etiketts verwenden. Danach funktionieren einige visuelle und CSS-Funktionen, und Ihr Formular sieht eng und benutzerfreundlich aus. Ich bin mir der Nachteile bewusst, aber dies wird das Alignment Wrestling vollständig entlasten.

Wenn Ihr Element ein Blockelement ist, das enthalten ist / oder wie folgt angezeigt wird:

display: table-cel

Oder Sie können mit einer festen Linienhöhe die vertikale Ausrichtung folgendermaßen einstellen:

Vertical-Align: Middle;

In anderen Fällen funktioniert es nicht, aber unter diesen Bedingungen funktioniert es einwandfrei.