Vertikale Ausrichtung von Labels zu Eingabefeldern

[Enrico]

Hallo,

Ich möchte die Labels zu Eingabefeldern zum zugehörigen Eingabefeld vertikal zentrieren, bekomme es aber einfach nicht hin, da ich
die Label-Divs nicht auf die gesamte Breite ausdehnen kann, da ich dann die Ausrichtung nicht mehr hinbekomme.

Hier stellvertretend für die weiteren Eingabefelder eine "Zeile" der HTML-Datei:

<div class="Zeile">
      <span class="Label" style="width:96px;">* Name:</span>
      <span class="Eingabefeld"><div class="Container_Eingabefeld" style="width:269px;"><input name="Name" type="text"></div></span>
    </div>

Hier die zugehörigen CSS-Definitionen:

.Zeile
{
  clear:   both;
  padding: 5px 0px;
  display: table;
}

.Label
{
  float:          left;
  text-align:     right;
  padding-right:  5px;
  display:        table-cell;
  vertical-align: middle;
}

.Eingabefeld
{
  float:      right;
  text-align: left;
}

.Container_Eingabefeld
{
  border:  2px solid #000000;
  padding: 2px;
  cursor:  hand;
}

Könnt Ihr mir bei der Lösung meines Problems weiterhelfen ?
Wie kann icherreichen, dass die Labels schön vertikal zentriert zum jeweiligen Eingabefeld angezeigt werden ?

Schon mal vielen Dank im voraus.

Gruss, Enrico

[Schorsch]

Salut

Ich bin mir nicht ganz Sicher, ob ich dein Problem/Ziel erfasst habe. Folgendes ist mir aber aufgefallen:

Gebe deinen gefloateten Elementen eine Breite an, sonst floaten diese mehr oder weniger unkonrolliert über die ganze Seite.

In deiner Klasse .Label willst du den Text vertical zentrieren. Dann musst du aber glaub noch die Höhe mitangeben. .Label (da gefloated) klebt an der Oberkante von .Zeile und ist nur so hoch, wie der Text drin.

Wenn du den Text in .Label vertical zentrieren möchtest, muss .Label gleich hoch sein wie .Zeile.

Gruss
Schorsch

[Enrico]

Hallo Schorsch,

Bingo, das war's... :-)))

Besten Dank und ein frohes Fest...

Gruss, Enrico