✔ input in div vertikal zentrieren

[di-five]

Hallo,

bei folgendem Quellcode wird das input-Textfeld im div-Element? nicht vertikal zentriert:

  <div style="background-color:grey; height:50px; line-height:50px;">
    <label for="Plz" style="width:200px; display:block; float:left;">PLZ:</label><input style="vertical-align:middle;" type="text" name="Plz" />
  </div>

Kann mir jemand sagen, wie ich das Textfeld vertikal zentriert kriege?

Gibt es eine elegantere Lösung Formulare zu erstellen?

Ich versuche das jetzt schon seit Stunden.

Ich würde mich über eine Lösung freuen.

Viele Grüße
di-five

 

[Maik]

Hi,

in den standardkonformen Browsern erzielst du die vertikale Zentrierung des input-Elements auf diese Weise:

<div style="background-color:grey; height:50px; line-height:50px; display:table-cell;vertical-align:middle;">
    <label for="Plz" style="width:200px; display:block; float:left;">PLZ:</label><input style="vertical-align:middle;" type="text" name="Plz" />
  </div>

Beim IE (bis einschliesslich IE7) hingegen, der die Tabellenwerte der display-Eigenschaft nicht interpretiert, gibt es hierfür keine saubere Lösung, außer es über einen oberen/unteren Innenabstand für das DIV zu versuchen.

mfg Maik

 

[di-five]

Hi Maik,

die Lösung funktioniert wunderbar! Vielen Dank!

Hier nochmal der Quellcode, wie ich ihn jetzt einsetzen werde (bis auch "background-color"):

  <div style="background-color:grey; height:30px; display:table-cell; vertical-align:middle;">
    <label for="Plz" style="background-color:green; width:200px; float:left; height:25px; line-height:25px;">PLZ:</label><input type="text" name="Plz" style="height:25px;" />
  </div>

Ich glaube, die Version ist eleganter, als Label und Textfeld in einem <p>-Element unterzubringen, und per margin den Abstand einzustellen.

Schade, dass das so erst ab einer späten IE-Version funktioniert!
Ich denke damit kann ich leben.

Vielen Dank und viele Grüße
di-five