Text Ausrichten unten, funktioniert nicht!

[Thomas]

Kann mir jemand sagen warum mein text obenist, und nicht unten, wo er eigentlich nach meiner Meinung hingehört?

.input_feld{
float:left;
width:150px;
height:25px;
margin-right:10px;
vertical-align:bottom;
border: #c0c0c0 1px solid;
}

[Krabumms]

Kann mir jemand sagen warum mein text obenist, und nicht unten, wo er eigentlich nach meiner Meinung hingehört?

.input_feld {
vertical-align:bottom;

Bei Zeilenelementen (zB <input>, <span>, <img>) gibt vertical-align die Position des betreffenden Elements selbst in der Zeile an, in der es steht. Es bezieht sich hier nicht auf seinen Inhalt.

Der Code …

Erste Zeile.<br>
Zweite Zeile mit <input style="vertical-align:bottom; height:5em" value="Eingabe">.<br>
Dritte Zeile.

… ergibt ungefähr dies:

Erste Zeile.
                 +---------+
                 |         +
                 | Eingabe +
                 |         +
Zweite Zeile mit +---------+.
Dritte Zeile.

Das <input>-Element ist am unteren Rand der Zeile ausgerichtet, so wie es sein vertical-align:bottom vorgibt.

Mit vertical-align:top:

Erste Zeile.
Zweite Zeile mit +---------+.
                 |         +
                 | Eingabe +
                 |         +
                 +---------+
Dritte Zeile.

Mit vertical-align:middle:

Erste Zeile.
                 +---------+
                 |         +
Zweite Zeile mit | Eingabe +.
                 |         +
                 +---------+
Dritte Zeile.

Möchtest du leeren Raum über dem Text im <input>-Element haben, musst du padding-top benutzen. Ich kann mich irren, aber eine Möglichkeit, den Text in einem <input> zu positionieren, gibt es nicht.

[bleicher]

Grüße,

Möchtest du leeren Raum über dem Text im <input>-Element haben, musst du padding-top benutzen. Ich kann mich irren, aber eine Möglichkeit, den Text in einem <input> zu positionieren, gibt es nicht.

jein - wenn das alleine im element ist, kann man die zeilenhöhe gleich der "kontainer"-höhe setzen, dann tut e vertical-align.

MFG
bleicher

[bleicher]

ah ja - man kann auch absolut mit bottom:0 darin positionieren.
MFG
bleicher

[Krabumms]

Ich kann mich irren, aber eine Möglichkeit, den Text in einem <input> zu positionieren, gibt es nicht.

jein - wenn das alleine im element ist, kann man die zeilenhöhe gleich der "kontainer"-höhe setzen, dann tut e vertical-align.

<input style="line-height:5em; height:5em; vertical-align:bottom" type="text" value="Eingabe">? Nein, jedenfalls nicht im standardkonformen Modus von Firefox 3.6 oder Opera 11, da bleibt das Wort "Eingabe" in der Mitte vom <input>.

[bleicher]

Grüße,
du hast auch nicht erwähnt, dass du mit .input ach wirklich input meinat. da kannst du recht wenig tun - die input-elemente werden meist im browser/OS look erzwungen, da gibt es wenig optione.
MFG
bleicher