CSS: Bir "div" içinde "etiket" ve "giriş" dikey olarak nasıl hizalanır?

Aşağıdaki kodu göz önünde bulundurun :

HTML:

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

CSS:

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

Koymak için en kolay yöntem ne olurdu labelve inputortasında div(dikey)?

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>

Bu yöntemin avantajları div, yazı alanının yüksekliğini değiştirebilmeniz, yazı alanının yüksekliğini değiştirebilmeniz ve yazı tipi boyutunu değiştirebilmeniz ve her şeyin her zaman ortada kalmasıdır.

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

daha modern bir yaklaşım css flex-box kullanmak olacaktır.

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

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

daha karmaşık bir örnek ... esnek akışta birden çok öğeye sahipseniz, tek öğeleri belirtilen hizalamaya farklı şekilde hizalamak için kendini hizalamayı kullanabilirsiniz ...

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>

ayrıca yatay ve dikey olarak ortalanması çok kolaydır:

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>

Bu, tarayıcılar arası çalışır, daha fazla erişilebilirlik sağlar ve daha az işaretleme ile gelir. div'i bırakın. Etiketi sarın

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>

Bu sorunun iki yıldan uzun bir süre önce sorulduğunun farkındayım, ancak yeni izleyiciler için işte Marc-François'nın çözümüne göre birkaç avantajı olan alternatif bir çözüm:

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

Burada sadece line-heightdiv'in yüksekliğine eşit bir ekliyoruz . Bunun avantajı, div'in display özelliğini artık uygun gördüğünüz gibi değiştirebilmenizdir ve inline-blockiçeriği dikey olarak ortalanmış olarak kalacaktır. Kabul edilen çözüm, div'i bir tablo hücresi olarak değerlendirmenizi gerektirir. Bu, tarayıcılar arası mükemmel şekilde çalışmalıdır.

Diğer tek avantaj, iki yerine sadece bir CSS kuralı olmasıdır :)

Şerefe!

Kullanım paddingüzerinde div( üst ve alt ) ve vertical-align:middleüzerinde labelve input.

http://jsfiddle.net/VLFeV/1/ adresinde örnek

Etiketi ve girişi tanımlı bir yüksekliğe sahip başka bir div'e sarın. Bu, 8'den düşük IE sürümlerinde çalışmayabilir.

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

display: table-cellÖzelliği aşağıdaki kodda olduğu gibi kullanabilirsiniz :

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