Christian: label und input vertikal zentrieren?

SELF-Forum

label und input vertikal zentrieren?

Christian
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. label und input vertikal zentrieren?

    Hopsel
    – Informationen zu den Bewertungsregeln

    Hi Christian!

    Gib line-height den gleichen Wert wie die Höhe der umschließenden Box.

    MfG H☼psel

    --
    "It's amazing I won. I was running against peace, prosperity, and incumbency."
    George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
    Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. label und input vertikal zentrieren?

      Christian
      – Informationen zu den Bewertungsregeln

      Gib line-height den gleichen Wert wie die Höhe der umschließenden Box.

      Hi Hospel,

      meinst du die line-height vom label? Und wie soll ich die Höhe setzen, die ich gar nicht kenne?
      Tut mir Leid, ich verstehe nicht, was du meinst...

      Grüße
      Christian

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. label und input vertikal zentrieren?

        Hopsel
        – Informationen zu den Bewertungsregeln

        Hi Christian!

        meinst du die line-height vom label? Und wie soll ich die Höhe setzen, die ich gar nicht kenne?
        Tut mir Leid, ich verstehe nicht, was du meinst...

        Wie willst du etwas vertikal zentrieren, wenn du keine Höhe der umschließenden Box angegeben hast?

        Den Tipp mit line-height habe ich bei Ingo Turski unter Zentrierung gefunden.

        Du gibst also einer umschließenden Box eine bestimmte Höhe und die gleiche Zeilenhöhe. Natürlich gibt es Einschränkungen, aber lies dir dazu besser Ingos Artikel durch.

        MfG H☼psel

        --
        "It's amazing I won. I was running against peace, prosperity, and incumbency."
        George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
        Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. label und input vertikal zentrieren?

          Christian
          – Informationen zu den Bewertungsregeln

          Du gibst also einer umschließenden Box eine bestimmte Höhe und die gleiche Zeilenhöhe. Natürlich gibt es Einschränkungen, aber lies dir dazu besser Ingos Artikel durch.

          Hi Hospel,

          danke für den Link und die Erklärung. Jetzt funktioniert es!

          Und es gefällt mir besser als die anderen halben Vorschläge, die ich im Forum entdeckt habe.

          Schöne Grüße
          Christian

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. label und input vertikal zentrieren?

    Gernot Back Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Christian,

    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.

    Wieso sollten LABEL- und INPUT-Elemente denn keine Inline-Elemente sein?
    Selbstverständlich sind sie das von Hause aus!

    Wenn du allerdings mutwillig (über float) eines von beiden Elementen aus dem Textfluss nimmst, es also der gemeinsamen Zeile beraubst über die es normalerweise mit dem anderen Element verbunden ist, dann wundere dich nicht, dass vertical-align:middle nicht mehr funktioniert und beide Elemente sich nicht mehr aneinander ausrichten können.

    Gruß Gernot

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. label und input vertikal zentrieren?

      Gernot Back Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo nochmal Christian,

      War es ungefähr das, was dir als Darstellung vorschwebte?

      Dazu bedarf es keinerlei Floats und Block-Displays und auch keines Herumspielens an der Line-Height.

        
<html>  
<head>  
<title>vertical align</title>  
<meta name="author" content="Gernot">  
<meta name="generator" content="Ulli Meybohms HTML EDITOR">  
<style type="text/css">  
[code lang=css]  
input {  
       vertical-align:middle;  
       margin-left:3px;  
}  
  
label {  
      vertical-align:middle;  
      padding-left:5em;  
      background-color:yellow;  
}

      </style>
      </head>
      <body>
            <form name="myForm" action="#" method="post" >
                  <label for="counter">Zähler:</label><input type="text" id="counter" name="counter" maxlength="8" size="8" />
            </form>
      </body>
      </html>
      [/code]

      Gruß Gernot

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln