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

92

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

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
Насколько мне известно, суть в том, что «вы не можете», и самый ленивый способ обойти это - использовать простой <table>и применить valign='middle'к его <td>s.
BeemerGuy

Ответы:

97

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/

Марк-Франсуа
источник
1
выглядит элегантно :) Кто-нибудь знает, насколько совместим этот метод с браузером?
Завен Нахапетян
1
Для IE, я думаю, он работает только в IE8 или лучше. Для других браузеров это нормально.
Marc-François
1
Я не знал о display: table-cell. Поддерживается ли это в некоторых браузерах?
BeemerGuy
7
@Misha вы должны были указать тот факт, что ваш ввод / метка были абсолютно позиционированы. Это полностью меняет обстоятельства вопроса. Я ставлю Марку +1. Отличный ответ.
jessegavin
2
Я почти уверен, что Дженсон пытался сформулировать (и должен был сформулировать) то, что использование display: table-celldiv заставляет вести себя так, как от них не ожидается, например, последующий рендеринг div в той же строке / и т. Д.
taswyn 01
74

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

Хольгер Уилл
источник
Я бы хотел, чтобы это сработало, когда на этикетке есть изображение и текст. У меня есть маленький значок, за которым следует текст, но текст не сдвигается с места.
Кевин Шарнхорст,
он работает, если метка и текст являются отдельными элементами, или если ваша метка тоже является флексбоксом ...
Хольгер Уилл
display:flexимеет меньшую совместимость, работает на chrome 29+
14

Это работает в разных браузерах, обеспечивает большую доступность и меньше разметки. отказаться от 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>
Альберт
источник
3
Очевидно, это не сработает для двухстрочной метки. И если вы уверены, что метка всегда однострочная, то есть миллионы других альтернатив.
Lashae
16
вопрос касался однострочной метки, и я ответил соответственно. не уверен, что вы здесь говорите или о намерениях, но если x настолько очевиден, вы должны сделать миллион примеров. по крайней мере, чтобы вы позлорадствовали моему ответу и почувствовали силу своего миллиона побед. Браво.
Альберт
2
Это лучший ответ для однострочных меток. В спецификации сказано: «Если атрибут for не указан, но элемент метки имеет помеченного потомка элемента, связанного с формой, то первым таким потомком в древовидной структуре является помеченный элемент управления метки». Таким образом, это единственный подход, при котором для максимальной простоты можно опустить атрибуты forи id.
парламент
8

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

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

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

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

Ура!

МузыкаЖивотное
источник
6

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

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

Габриэле Петриоли
источник
Это не работает с jsfiddle. Я изменил высоту, divи содержимое внутри вообще не двигалось. Я что-то упускаю?
BeemerGuy
На мой взгляд, макеты не должны иметь фиксированной высоты в пикселях ... Макеты должны плавно обтекать контент. Однако я пришел из того времени, когда браузеры масштабировали размеры текста при увеличении и уменьшении масштаба. Недавние браузеры фактически масштабируют всю страницу, поэтому установка высоты в пикселях работает немного лучше. Однако появились совершенно новые причины избегать установки высоты пикселей… например, методы адаптивного макета. Вот почему это был бы мой предпочтительный метод.
thirdender
3

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

position:absolute; 
top:0; bottom:0; left:0; right:0;
margin:auto;
Тревор
источник
0

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

div {
     height: 100%;
     display: table-cell; 
     vertical-align: middle;
    }
абахет
источник