Vertical Align bei Textbox?

  • Hallo,
    da ich eine größere Suchbox machen möchte, soll der Text in dem Textfeld mittig ausgerichtet sein.

    Code
    vertical-align:middle;

    Funktioniert bei mir jedoch leider nicht. Jedoch ist ein Input Textfeld doch ein Inline Element und text-align:center; geht auch... :roll:

    Wäre wirklich schade, wenn das nicht irgendwie geht.

    Danke

  • Vertical-Align bestimmt, wo der Inhalt eines Tabellen-Zellen-Elementes sein soll.
    Um den Text zentriert (waagerechte Richtung) darzustellen musst du

    HTML
    text-aling: center;

    verwenden.
    Ich kann dir versichern, das funktioniert, hab ich selber auch verwendet.

    Wenn du es aber vertikal zentrieren willst, dann musst du zuerst das Inline-Input-Element als Zelle darstellen mittels:

    HTML
    display: table-cell;


    und es dann mithilfe von:

    HTML
    vertical-align: middle;


    ausrichten.

    Schau mal unter Google nach, das hilft dir eventuell dabei ;)

  • Hallo,
    ich meinte schon das vertical-align:middle; für css ;)

    Ich habe es nun mit padding gelöst, weil display:table-cell; auch noch nicht im IE7 unterstützt wird. Das ist dann zu extrem.

  • Mach doch trotzdem display: table-cell aber für IE7 dann entsprechend eine Alternativlösung per Cond. Comments und deiner Paddingidee.
    Das wäre professioneller und bereitet die Seite besser auf zukünftige Webstandards und Browserversionen vor.

  • vertical-allign gilt aber nur für die Ausrichtung innerhalb der Zeile - bei garantiert-ein-zeilen-stellen kannst du "einfach" die line-height einstellen - dann funktioniert das auch wies soll ;)

  • Hallo,
    so hatte es gerade nicht funktioniert:

    Code
    line-height:48px;
    vertical-align:middle;

    (Hab das dem Input Textfeld Style zugeordnet.)
    Und nur mit

    Code
    line-height:48px;

    geht es natürlich auch nicht.

    Wie gesagt, ist zwar nicht so schön, aber so geht es zumindest bisher in allen von mir getesteten Browsern:

    Code
    padding:5px;
    padding-top:9px;