it-swarm.com.de

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

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

71
Logan Serman

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 ausprobiert habe .. __ Ich würde empfehlen, das Auffüllen nur für IE zu verwenden. Sollte es Ihnen leichter machen, es richtig zu positionieren, wenn es nur in einem bestimmten Browser arbeiten muss.

10
Gerhard Dinhof

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

Nehmen wir zum Beispiel an, Sie möchten ein 42px großes Eingabefeld mit einer Schriftgröße von 20px. Sie können einfach den Unterschied zwischen der Eingabehöhe und der Schriftgröße ermitteln, ihn durch zwei teilen und Ihre Auffüllung auf diesen Wert einstellen. In diesem Fall würden Sie insgesamt 22px auffüllen, was auf jeder Seite 11px ist.

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

Das würde ein 42px hohes Eingabefeld mit perfekter vertikaler Ausrichtung ergeben.

Hoffentlich hilft das.

97

Ich habe es selbst nicht ausprobiert, aber versuche es:

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

Dabei ist 36px die Höhe Ihrer Eingabe.

60
Chris Hawes

Ich weiß, dass ich zu spät zur Party komme, aber hoffentlich hilft dies jedem, der nach einer prägnanten Antwort sucht, die in allen gängigen Browsern funktioniert. .

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

beifall! JP

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

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

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

Ich brauchte ein Texteingabefeld, das genau 40 Pixel hoch sein sollte, einschließlich eines Randes von 1 Pixel. Natürlich wollte ich, dass der Text in allen Browsern vertikal in der Mitte ausgerichtet wurde.

1 Pixel Rand oben
1 Pixel Rand unten
8 Pixel-Auffüllung
Bodenabstand von 8 Pixel
22-Pixel-Schriftgröße

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

Dabei ist zu beachten, dass Sie die Eigenschaft "css height" entfernen müssen, da sonst diese Pixel zu Ihrer Gesamtsumme hinzugefügt werden.

<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 etwas so einfaches in IE8 funktioniert, es in 6, 7 und 9 ähnlich funktionieren sollte, aber ich habe es nicht getestet. Bitte lass es mich wissen und ich werde diesen Beitrag entsprechend bearbeiten.

3
Sparky

Versuchen :

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

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

2
Gew

Nach langem Suchen und Frustration funktionierte eine Kombination aus Höhe, Linienhöhe und fehlendem Abstand, wenn ein Hintergrundbild mit fester Höhe (24px) 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;
}
1
user275649

Die innere vertikale Ausrichtung hängt von der Schrifthöhe und der Eingabehöhe ab. Daher kann sie mithilfe von Füllungen angepasst werden. 

Versuchen Sie etwas wie:

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

...

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

Vergessen Sie nicht, die Werte in der Klasse css an Ihre Bedürfnisse anzupassen.

0
Diego Favero

Gehen Sie für line-height.

Das vertical-align-Tag funktioniert gut für die Schaltfläche zum Senden, nicht jedoch für den Text im Eingabefeld . Die Einstellung von line-height auf die Höhe des Eingabefelds funktioniert in allen Browsern. Inklusive IE7.

0
Peter Waegemans

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

Setzen Sie einfach die Boxgröße für IE8 auf box-sizing: content-box; zurück und verwenden Sie dann eine der Antworten für die Auffüllung/Höhe.

0
GusRuss89

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.

0
Morningseven

Stellen Sie einfach nicht die Höhe des Eingabefelds ein, sondern nur die Schriftgröße. Das wird in Ordnung sein

0
imikay