CSS: Jak wyrównać w pionie „etykietę” i „dane wejściowe” wewnątrz „div”?

Rozważ następujący kod :

HTML:

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

CSS:

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

Jaka byłaby najłatwiejsza metoda umieszczenia labeli inputna środku div(pionowo)?

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>

Zaletą tej metody jest to, że możesz zmienić wysokość divpola tekstowego, zmienić wysokość pola tekstowego oraz zmienić rozmiar czcionki, a wszystko zawsze pozostanie na środku.

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

bardziej nowoczesnym podejściem byłoby użycie css flex-box.

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

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

bardziej złożony przykład ... jeśli masz wiele elementów w przepływie flex, możesz użyć align-self, aby wyrównać pojedyncze elementy inaczej do określonego align ...

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>

jest również bardzo łatwy do wyśrodkowania w pionie i poziomie:

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>

Działa to w różnych przeglądarkach, zapewnia większą dostępność i wymaga mniej znaczników. porzuć div. Owiń etykietę

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>

Zdaję sobie sprawę, że to pytanie zostało zadane ponad dwa lata temu, ale dla wszystkich niedawnych widzów, oto alternatywne rozwiązanie, które ma kilka zalet w porównaniu z rozwiązaniem Marca-François:

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

Tutaj po prostu dodajemy line-heightrówność do wysokości elementu div. Zaletą jest to, że możesz teraz zmienić właściwość wyświetlania elementu div według własnego uznania, inline-blockna przykład na, a jego zawartość pozostanie wyśrodkowana w pionie. Przyjęte rozwiązanie wymaga traktowania elementu div jako komórki tabeli. To powinno działać idealnie, w różnych przeglądarkach.

Jedyną zaletą jest to, że to tylko jedna reguła CSS więcej zamiast dwóch :)

Twoje zdrowie!

Używaj paddingna div(na górze i na dole ) oraz vertical-align:middlena labeli input.

przykład pod adresem http://jsfiddle.net/VLFeV/1/

Owiń etykietę i wprowadź inny element div o określonej wysokości. Może to nie działać w wersjach IE niższych niż 8.

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

Możesz użyć display: table-cellwłaściwości jak w poniższym kodzie:

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