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 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>

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;
}

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

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

干杯！

Answer 5

使用padding上的div（顶部和底部）和vertical-align:middle以及label上的input。

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

Answer 6

将标签包裹并输入另一个具有指定高度的div。这可能不适用于低于8的IE版本。

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;
    }

CSS：如何在“div”中垂直对齐“label”和“input”？

7 个答案: