CSS: Bagaimana cara menyelaraskan "label" dan "input" secara vertikal di dalam "div"?

Perhatikan kode berikut :

HTML:

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

CSS:

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

Apa cara termudah untuk meletakkan labeldan inputdi tengah div(secara vertikal)?

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>

Kelebihan dari metode ini adalah Anda dapat mengubah tinggi div, mengubah tinggi bidang teks dan mengubah ukuran font dan semuanya akan selalu berada di tengah.

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

pendekatan yang lebih modern akan menggunakan 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>

contoh yang lebih kompleks ... jika Anda memiliki banyak elemen dalam aliran fleksibel, Anda dapat menggunakan align-self untuk menyelaraskan elemen tunggal secara berbeda dengan perataan yang ditentukan ...

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>

juga sangat mudah untuk memusatkan secara horizontal dan vertikal:

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>

Ini berfungsi lintas browser, menyediakan lebih banyak aksesibilitas dan dilengkapi dengan lebih sedikit markup. buang div. Bungkus labelnya

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>

Saya tahu pertanyaan ini telah diajukan lebih dari dua tahun yang lalu, tetapi untuk pemirsa baru-baru ini, berikut adalah solusi alternatif, yang memiliki beberapa keunggulan dibandingkan solusi Marc-François:

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

Di sini kita hanya menambahkan yang line-heightsama dengan ketinggian div. Keuntungannya adalah Anda sekarang dapat mengubah properti tampilan dari div sesuai keinginan Anda, inline-blockmisalnya, dan isinya akan tetap berada di tengah secara vertikal. Solusi yang diterima mengharuskan Anda memperlakukan div sebagai sel tabel. Ini harus bekerja dengan sempurna, lintas browser.

Satu-satunya keuntungan lain adalah hanya satu aturan CSS lagi, bukan dua :)

Bersulang!

Gunakan paddingdi div( atas dan bawah ) dan vertical-align:middledi labeldan input.

contoh di http://jsfiddle.net/VLFeV/1/

Bungkus label dan masukan div lain dengan ketinggian yang ditentukan. Ini mungkin tidak berfungsi di versi IE yang lebih rendah dari 8.

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

Anda dapat menggunakan display: table-cellproperti seperti pada kode berikut:

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