CSS: Wie kann man ein "Label" und eine "Eingabe" innerhalb eines "Div" vertikal ausrichten?

Betrachten Sie den 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, um das labelund das inputin die Mitte des div(vertikalen) zu setzen?

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

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

Der Vorteil dieser Methode besteht darin, dass Sie divdie Höhe des Textfelds und die Höhe des Textfelds sowie die Schriftgröße ändern können und alles immer in der Mitte bleibt.

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

Ein moderner Ansatz wäre die Verwendung einer CSS-Flexbox.

div {
  height: 50px;
  background: grey;
  display: flex;
  align-items: center
}

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

Ein komplexeres Beispiel ... Wenn Sie mehrere Elemente im Flex-Flow haben, können Sie Align-Self verwenden, um einzelne Elemente anders als das angegebene Align auszurichten ...

div {
  display: flex;
  align-items: center
}

* {
  margin: 10px
}

label {
  align-self: flex-start
}

<div>
  <img src="https://de.gravatar.com/userimage/95932142/195b7f5651ad2d4662c3c0e0dccd003b.png?size=50" />
  <label>Text</label>
  <input placeholder="Text" type="text" />
</div>

Es ist auch super einfach, horizontal und vertikal zu zentrieren:

div {
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background: grey;
  display: flex;
  align-items: center;
  justify-content:center
}

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

Dies funktioniert browserübergreifend, bietet mehr Zugänglichkeit und weniger Markup. Graben Sie die div. Wickeln Sie das Etikett ein

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>

Ich bin mir bewusst, dass diese Frage vor über zwei Jahren gestellt wurde, aber für alle neueren Zuschauer ist hier eine alternative Lösung, die einige Vorteile gegenüber Marc-François 'Lösung hat:

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

Hier fügen wir einfach nur einen line-heightWert hinzu, der der Höhe des Div entspricht. Der Vorteil besteht darin, dass Sie jetzt die Anzeigeeigenschaft des div nach inline-blockBelieben ändern können und der Inhalt vertikal zentriert bleibt. Die akzeptierte Lösung erfordert, dass Sie das div als Tabellenzelle behandeln. Dies sollte perfekt funktionieren, browserübergreifend.

Der einzige andere Vorteil ist, dass es nur noch eine CSS-Regel statt zwei gibt :)

Prost!

Verwenden Sie paddingauf der div( oben und unten ) und vertical-align:middleauf der labelund input.

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

Wickeln Sie das Etikett ein und geben Sie es in ein anderes Div mit einer definierten Höhe ein. Dies funktioniert möglicherweise nicht in IE-Versionen unter 8.

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

Sie können die display: table-cellEigenschaft wie im folgenden Code verwenden:

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