Input Feld Text zentrieren

[TZP]

Moinz.

Ich hab n normales Input-feld...nix besonderes, Standart halt.

 <INPUT CLASS="insertframe" NAME="if" VALUE="Irgendwas eingeben">

und die Klasse dazu

.insertframe{
    font-family: arial, sans-serif;
    width: 80%;
    height: 26px;
    vertical-align: middle;
    font-size: 15px;
}

Jetzt habe ich das Problem, dass der Text, den ich eingeben kann, immer ganz oben in dem Feld ist. Ich hätte ihn aber gerne vertical zentriert. Ich dachte erst, dass würde über "vertical-align:middle" gehen aber das versetzt die gesamte Box um ein paar Pixel. Mit "middle" passt es übrigens gut zum Button daneben aber das nur am Rande.

Google Chrome, Opera und Safari zeigen den Text schön zentriert an, FF und IE sind nach oben versetzt.
___
|
| a
|__

___
| a
|
|__

Das ist zwar etwas übertrieben dargestellt aber soll es so halb verdeutlichen. Gibt es da ne Lösung für alle oder hab ich Pech gehabt?

-bedank-
TZP

 

[Prasedonym]

1. muss das Input feld dann so gross sein?
2. und der TExt willst du den auch nicht anpassen?

sonst versuch es mal mit

text-align: center

 

[TZP]

Das hab ich meinen Chef auch gefragt. ^^
Text-align: center is an sich ne gute Idee aber es zentriert den Text in der horizontalen Mitte vom Feld. Also quasi:

________
|___a___|


Das um 90° gedreht wäre nice. :) Aber ich glaube, da hat mein Chef Pech gehabt, wenn die Schrift so klein bleiben soll.

 

[TZP]

So, hat sich erledigt. Geht nich, weil is nich...wurde sogar angenommen.
Aber falls jemand noch ne Idee zu hat, bin ich nich abgeneigt. Wer weiß, was als nächstes kommt. ^^

 

[Efchen]

display:table-cell;
vertical-align:middle;

Aber nicht im IE (zumindest nicht in den alten)

:-)

 

[TZP]

No change here. Der FF und IE7 lassen sich davon nicht beeindrucken. Den IE6 teste ich lieber nich an. Aber ich dank dir trotzdem. :)

 

[Efchen]

Hmmm...ich habs nicht probiert, aber ich dachte, der FF müsste das können. Dann musst Du Dich halt mal nach display:table-cell umhören.
Ansonsten würde ich mit der line-height rumspielen. Das könnte funktionierne.

 

[threadi]

Würde eher mit padding arbeiten - nach oben und unten den selben Wert - fertig.

 

[neuroleptika]

Würde ich auch machen.
Aber wenn eine px-Höhe eingehalten werden muß ist das so nicht möglich.
Eine Möglichkeit wäre border und outline von input zu entfernen und ein Element mit height um das input zu legen.
Die Rahmen können dem umschließenden Element wieder zugefügt werden.

<form action="#" >
<p><b></b>[COLOR="DarkRed"][B]<label>[/B][/COLOR]<span><strong>Eingabe:</strong><input type="text" value="Eingabe" onfocus="eingabe" id="vorname" /></span>[COLOR="#8b0000"][B]</label>[/B][/COLOR]</p>
</form>

Mögliches css:

* {
margin: 0;
padding: 0;
}



body {
font-size: 100%;
font-family: arial;
background-color: silver;
color: black;
}

form p {
display: table;
height: 50px;
background-color: white;
border: 1px solid gray;
}

form label {
display: table-row;
}

form label span {
display: table-cell;
height: 50px;
vertical-align: middle;
}

form b {
display: none;
}

form input {
border: 0px solid;
outline: none;
}

form strong {
position: absolute;
left: -3000px;
}

und für den IE<8 inline-block:

  <!--[if lt IE 8]>
<style>
form,
form p,
form label,
form label span {
display: inline;
zoom:1;
height: auto;
}

form b {
display: inline;
zoom: 1;
height: 50px;
vertical-align: middle;
}
</style>
<![endif]-->

b habe ich zum aufspannen der Zeile IE5.5-7 eingefügt,
span um ein vollständiges Tabellengerüst zu bekommen (ff2),
strong wird für sehende Ausgeblendet.

 

[TZP]

Hmhm...nich schlecht. Ich werde mir mal n Shortcut hierzu setzen, falls ich es doch noch einbauen soll. Aber auf jeden Fall meinen Dank für die Mühe!

TZP