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

Question

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 (вертикально) ?

782 7

html css vertical-alignment

7 ответов:

Comments

Ничего не найдено.

Marc-François · Accepted Answer · 2018-06-20 11:10:25

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/

Holger Will · Accepted Answer · 2017-05-11 06:52:35

более современным подходом было бы использование 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>
более сложный пример... если в потоке гибкого трубопровода имеются многоэлементные элементы, можно использовать функцию выравнивания-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 placholder="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>

albert · Accepted Answer · 2013-03-17 20:23:15

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

MusikAnimal · Accepted Answer · 2012-12-27 20:32:03

Я знаю, что этот вопрос был задан более двух лет назад, но для любых недавних зрителей, вот альтернативное решение, которое имеет несколько преимуществ перед решением Марка-Франсуа:
div {
    height: 50px;
    border: 1px solid blue;
    line-height: 50px;
}
здесь мы просто только добавить line-height равно высоте div. Преимущество в том, что теперь вы можете изменить свойство отображения div, как вы считаете нужным, на inline-block например, и его содержимое останется вертикально по центру. Принятое решение требует, чтобы вы лечили div как ячейка таблицы. Это должно работать отлично, кросс-браузер.

единственное другое преимущество в том, что это всего лишь еще одно правило CSS вместо двух :)

Ура!

Gabriele Petrioli · Accepted Answer · 2010-12-17 02:20:24

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

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

Trevor · Accepted Answer · 2010-12-17 02:14:56

оберните метку и введите в другой div с определенной высотой. Это может не работать в версиях IE ниже 8.
position:absolute; 
top:0; bottom:0; left:0; right:0;
margin:auto;

abahet · Accepted Answer · 2015-10-27 12:34:18

можно использовать display: table-cell собственность, как в следующем коде:
div {
     height: 100%;
     display: table-cell; 
     vertical-align: middle;
    }