CSS:如何在"div"中垂直对齐"label"和"input"？

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>

一个更复杂的例子......如果你在flex流程中有多个元素,你可以使用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

这适用于跨浏览器,提供更多可访问性并且标记更少.放弃了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>

Answer 4

我知道这个问题是在两年前提出来的,但是对于最近的观众来说,这里有一个替代解决方案,它比Marc-François的解决方案有一些优势:

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

这里我们只添加一个line-height等于div高度的数字.现在,您可以根据需要更改div的显示属性,其优点是inline-block,它的内容将保持垂直居中.接受的解决方案要求您将div视为表格单元格.这应该完美,跨浏览器.

唯一的另一个好处是它只是一个CSS规则而不是两个:)

干杯!

Answer 5

使用padding上div(顶部和底部),并vertical-align:middle在label和input.

http://jsfiddle.net/VLFeV/1/上的示例