CSS Herausforderung

Wieso kann kann man die input Felder hier nicht vertical mittig zentrieren?

< div style=„display: table;“>
< input type=„text“ style="
width: 97px;
height: 15px;
display: table-cell;
vertical-align: middle;
„>
< div style=“
width: 200px;
height: 50px;
background-color: yellow;
display: table-cell;
vertical-align: middle;
">

< input type=„text“ style="
width: 10px;
height: 15px;
display: table-cell;
vertical-align: middle;
">
< /div>

Auch wenn in deinem Beispiel ein Div-Tag nicht geschlossen ist, so ist das Textfeld im gelben Div-Container vertikal zentriert. Das erste Textfeld hingegen ist nicht in einem Element eingeschlossen, welches ihm das vertikale Zentrieren erlaubt. Du müsstest es auch mit einem Element umschließen, welches eine Höhe oder eine Mindesthöhe hat.

Hi, zusätzlich zum Conatainer, würde ich das Beispiel per float realisieren.

<div style="width: 100%; margin: 0 auto; padding: 0;">
  <div style="float: left; width: 32%; border: thin solid black; vertical-align: middle; text-align: center;">
    <input type="text" value="left" />
  </div>
  <div style="float: left; width: 32%; border: thin solid black; text-align: center;">
    <input type="text" value="center" />
  </div>
  <div style="float: left; width: 32%; border: thin solid black; text-align: center;">
    <input type="text" value="right" />
  </div>
</div>
<div style="clear: both;">&nbsp;</div>

Danke. Float kann ich aber nicht verwenden, da das input eine dynamische Größe hat (passt sich der Eingabe an). Die Größe des äußeren div variiert daher mit der Größe des Inputs.

Kennst du eine andere Lösung?

Danke für die AW.
Das hätte ich auch schon versucht funktioniert aber nicht. :sleepy:

Danke, jetzt hat es funktioniert. < div>< input>< /div>

Kannst du mir dein Beispiel zeigen? Sicher gibt es noch weitere Möglichkeiten, es wäre für mich einfacher, wenn ich sehe wie sich die Breite ergibt.