label und input vertikal zentrieren?

[Christian]

Hi,

ich habe ein Formular und würde gerne Label und Input-Feld auf gleicher Höhe haben.

label {
  display:block;
  float:left;
  width:13ex;
  text-align:right;
  vertical-align:middle;
}

input {
  margin:3px;
  vertical-align:middle;
}

<label for="counter">Zähler:</label><input type="text" id="counter" name="counter" maxlength="8" size="8" />

Ich suche nun schon ewig aber finde einfach keine Lösung. Mit vertical-align:middle geht es nicht, weil es keine inline- bzw. table-cell-Elemente sind, das habe ich nun gelernt.

Aber wie dann? Ein umgebendes <div> mit display:table-cell funktioniert auch nicht. Manchmal wurde auch vorgeschlagen, dass man mit padding-top und margin-top "herumspielen" soll, aber das hat für mich nichts mehr mit sauberem Code sondern nur noch mit Augenmaß zu tun.

Ich hoffe es gibt doch noch eine halbwegs elegante Lösung.

Schöne Grüße
Christian