Probleme beim vertikalen Ausrichten und width-Angabe (bei InlineElementen)

[Christian]

Hi,

ich möchte folgende HTML-Struktur sauber mit CSS formatieren.
Es handelt sich um ein Teil aus einem Formular, welches durch HTML nur logisch beschrieben wird. Alle Elemente des Formulars entsprechen dem Schema:

<div>
<label>Name</label>
<input type="text" alt="..." />
</div>

klar soweit?

früher habe ich meine Formulare mit Tabellen gemacht, aber mit CSS ist man ja doch flexibler... dachte ich.
Ich möchte nun beide Elemente (label und input) horizontal zueinander ausrichten. Das Label soll (vertikal) mittig zum Input stehen und umgekehrt (falls z.B. das Label höher ist als die Textbox).
Früher:
<tr>
<td valign="center">Name</td>
<td valign="center"><input type="text" .... /></td>
</tr>

Hatte nun folgende Probleme mir CSS:
1. wenn ich dem label eine width gebe, tut sich GAR nichts! Wieso?
2. gebe ich dem label: display:block, nimmt er zwar die width richtig, aber beide elemente stehen natürlich untereinander.
3. gebe ich dem label ein float:left, stimmts auch soweit.

Allerdings habe ich es nie geschafft, die Elemente vertikal zu einander auszurichten! vertical-align: middle zeigt null Wirkung.
Es klappt nur, wenn ich float oder display weglasse, aber dann kommt wieder der Fehler, dass die width nicht interpretiert wird.

Kann man inline-Elementen keine width geben?

Und wie richte ich nun die beiden Elemente schön sauber zu einander vertikal aus?

Danke+ Gruß
Christian

[MudGuard]

Hi,

1. wenn ich dem label eine width gebe, tut sich GAR nichts! Wieso?

Weil label ein non-replaced inline Element ist und width daher nicht interpretiert werden darf.

2. gebe ich dem label: display:block, nimmt er zwar die width richtig, aber beide elemente stehen natürlich untereinander.
3. gebe ich dem label ein float:left, stimmts auch soweit.

Allerdings habe ich es nie geschafft, die Elemente vertikal zu einander auszurichten! vertical-align: middle zeigt null Wirkung.

Wenn das Element gefloatet ist, ist display auf block. vertical-align trifft auf inline-Elemente (inline, inline-block, inline-table) zu und auf table-cell-Elemente. Dank des impliziten display:block ist das label weder ein inline- noch ein table-cell-Element.

Kann man inline-Elementen keine width geben?

Nein - sie zeichnen sich ja gerade dadurch aus, daß sie so breit sind wie es der Inhalt vorgibt.

Und wie richte ich nun die beiden Elemente schön sauber zu einander vertikal aus?

line-height, padding-top, margin-top …

cu,
Andreas