CSS: Как выровнять по вертикали "метку" и "enter" внутри "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 (по вертикали)?

Ответ 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>

Ответ 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>

Ответ 3

Это работает кросс-браузер, обеспечивает большую доступность и имеет меньшую разметку. канава 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>

Ответ 4

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

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

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

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

Ура!

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

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