CSS: Как выровнять по вертикали «label» и «input» внутри «div»?

Question

Рассмотрим следующий код :

HTML:

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

CSS:

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

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

Answer 1

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/

Answer 2

более современный подход - использовать 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 для выравнивания отдельных элементов по-разному в соответствии с указанным выравниванием...

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>

Answer 3

Это работает кросс-браузер, обеспечивает большую доступность и меньше разметки.угробить див.Оберните этикетку

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>

Answer 4

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

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

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

Единственное другое преимущество - это еще одно правило CSS вместо двух:)

Cheers!

Answer 5

Используйте padding на div ( сверху и снизу ) и vertical-align:middle на label и input.

пример на http://jsfiddle.net/VLFeV/1/

Answer 6

Обернуть метку и ввести в другой div с определенной высотой.Это может не работать в версиях IE ниже 8.

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

Answer 7

Вы можете использовать display: table-cell свойство как в следующем коде:

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