CSS: Як вирівняти вертикально «мітку» та «введення» всередині «div»?

Розглянемо такий код :

HTML:

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

CSS:

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

Яким буде найпростіший спосіб поставити labelі inputв середині div(вертикально)?

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>

Перевагами цього методу є те, що ви можете змінити висоту div, змінити висоту текстового поля та змінити розмір шрифту, і все завжди залишатиметься посередині.

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

більш сучасним підходом було б використання 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>

більш складний приклад ... якщо у вас є кілька елементів у гнучкому потоці, ви можете використовувати align-self для вирівнювання окремих елементів по-різному до зазначеного 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>

його також дуже просто центрувати по горизонталі та вертикалі:

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>

Це працює у крос-браузері, забезпечує більшу доступність та меншу розмітку. скинути div. Оберніть етикетку

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>

Я усвідомлюю, що це питання було задано два роки тому, але для останніх глядачів, ось альтернативне рішення, яке має кілька переваг перед рішенням Марка-Франсуа:

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

Тут ми просто додаємо line-heightрівне до висоти div. Перевагою є те, що тепер ви можете змінити властивість відображення div, як вважаєте за потрібне, inline-blockнаприклад, і його вміст залишиться вертикально відцентрованим. Прийняте рішення вимагає, щоб ви розглядали div як комірку таблиці. Це має працювати ідеально, крос-браузер.

Єдиною перевагою є лише одне правило CSS замість двох :)

На здоров’я!

Використовуйте paddingна div( зверху і знизу ) та vertical-align:middleна labelі input.

приклад на http://jsfiddle.net/VLFeV/1/

Оберніть мітку та введення в інший div з визначеною висотою. Це може не працювати у версіях IE нижче 8.

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

Ви можете використовувати display: table-cellвластивість, як у наступному коді:

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