CSS: Wie kann man ein "Label" und "Input" innerhalb eines "div" vertikal ausrichten?

Betrachten die folgenden code:

HTML:

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

CSS:

div {
    height: 50px;
    border: 1px solid blue;
}

Was wäre die einfachste Methode für die label und die input in der Mitte des div (vertikal) ?

Kommentar zu dem Problem
Meines Wissens nach, die Quintessenz ist, "das kannst du nicht", und der faulste Weg, um es mit einem einfachen <table> apply valign='middle' in Ihrer <td> en. Kommentarautor: BeemerGuy

InformationsquelleAutor der Frage Misha Moroshko | 2010-12-17

  1. 83
    div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    border: 1px solid red;
}

    Die Vorteile dieser Methode ist, dass Sie können ändern, die Höhe der div ändern Sie die Höhe des Textfeld, und ändern Sie die schriftart, Größe und alles wird immer in der Mitte zu bleiben.

    http://jsfiddle.net/53ALd/6/

    InformationsquelleAutor der Antwort Marc-François

  2. 10

    Dies funktioniert cross-browser bietet mehr Zugänglichkeit und kommt mit weniger markup.
    Graben die div. Wickeln Sie das Etikett

    label{
     display: block; 
     height: 35px; 
     line-height: 35px; 
     border: 1px solid #000; 
}

input{margin-top:15px; height:20px}

<label for="name">Name: <input type="text" id="name" /></label>

    InformationsquelleAutor der Antwort albert

  3. 8

    Ich bin mir bewusst, diese Frage wurde vor über zwei Jahren, aber für alle jüngeren Zuschauer, hier ist eine alternative Lösung, die hat ein paar Vorteile gegenüber Marc-François-Lösung:

    div {
    height: 50px;
    border: 1px solid blue;
    line-height: 50px;
}

    Wir uns hier einfach nur eine line-height gleich der Höhe der div. Der Vorteil, Sie können nun ändern Sie die display-Eigenschaft des div-wie Sie sehen, passen, zu inline-block zum Beispiel, und es ist der Inhalt wird bleiben vertikal zentriert. Die akzeptierte Lösung erforderlich ist, behandeln Sie das div als table-cell. Dies sollte perfekt funktionieren, cross-browser.

    Die nur anderen Vorteil, es ist einfach eine weitere CSS-Regel statt zwei 🙂

    Prost!

    InformationsquelleAutor der Antwort MusikAnimal

  4. 6

    Verwenden padding auf die div (oben und unten) und vertical-align:middle auf die label und input.

    Beispiel bei http://jsfiddle.net/VLFeV/1/

    InformationsquelleAutor der Antwort Gabriele Petrioli

  5. 3

    Wickeln Sie das label und input in einem anderen div mit definierter Höhe. Dies funktioniert nicht im IE-Versionen kleiner 8. 

    position:absolute; 
top:0; bottom:0; left:0; right:0;
margin:auto;

    InformationsquelleAutor der Antwort Trevor

  6. 1

    Können Sie display: table-cell - Eigenschaft wie im folgenden code:

    div {
     height: 100%;
     display: table-cell; 
     vertical-align: middle;
    }

    InformationsquelleAutor der Antwort abahet

Schreibe einen Kommentar