CSS：如何在“div”内垂直对齐“标签”和“输入”？答案

【问题标题】：CSS: How to align vertically a "label" and "input" inside a "div"?CSS：如何在“div”内垂直对齐“标签”和“输入”？
【发布时间】：2011-05-26 21:07:27
【问题描述】：

考虑following code：

HTML：

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

CSS：

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

将label 和input 放在div 中间（垂直）的最简单方法是什么？

【问题讨论】：

据我所知，底线是“你不能”，最懒惰的方法是使用简单的<table> 并将valign='middle' 应用于其<td> s。

标签： css html vertical-alignment

【解决方案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/

【讨论】：

看起来很优雅 :) 有谁知道这种方法与浏览器的兼容性如何？
对于 IE，我认为它只适用于 IE8 或更高版本。对于其他网络浏览器来说没问题。
我不知道display: table-cell。某些浏览器是否支持该功能？
@Misha 你应该指定你的输入/标签是绝对定位的事实。这完全改变了问题的情况。我给马克+1。很好的答案。
我相当肯定 jenson 试图说明（并且应该明确指出）的观点是，使用 display: table-cell 会使 div 以它们不期望的方式运行，例如后续 div在同一行/等上渲染。

【解决方案2】：

包装标签并输入另一个具有定义高度的div。这在低于 8 的 IE 版本中可能不起作用。

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

【讨论】：

【解决方案3】：

在div（顶部和底部）上使用padding，在label 和input 上使用vertical-align:middle。

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

【讨论】：

这在 jsfiddle 上不起作用。我更改了div 的高度，里面的内容根本没有移动。我错过了什么吗？
在我看来，布局不应该有固定的像素高度……布局应该围绕内容流畅地流动。然而，我来自浏览器在放大和缩小时缩放文本大小的日子。最近的浏览器实际上会缩放整个页面，因此设置像素高度会更好一些。然而，避免设置像素高度有全新的理由……例如，响应式布局技术。这就是为什么这将是我的首选方法。

【解决方案4】：

这适用于跨浏览器，提供更多可访问性并且带有更少的标记。放弃 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>

【讨论】：

这显然不适用于两行标签。如果您确定标签始终是单行，那么还有数以百万计的其他选择。
问题是关于单行标签的，我相应地回答了。不确定你的观点或意图，但如果 x 如此明显，你应该去做一百万个例子。至少这样你就可以在我的回答下幸灾乐祸，感受你百万胜利的力量。太棒了。
这是单行标签的最佳答案。规范说：“如果未指定 for 属性，但 label 元素具有可标记的表单关联元素后代，那么按树顺序排列的第一个此类后代是 label 元素的带标签控件。”因此，这是唯一一种您可以省略 for 和 id 属性以获得最大简单性的方法。

【解决方案5】：

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

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

这里我们只是简单的添加了一个line-height等于div的高度。优点是您现在可以根据需要更改 div 的 display 属性，例如更改为 inline-block，其内容将保持垂直居中。公认的解决方案要求您将 div 视为表格单元格。这应该可以完美运行，跨浏览器。

唯一的另一个优点是它只是多了一条 CSS 规则而不是两条 :)

干杯！

【讨论】：

【解决方案6】：

您可以使用display: table-cell 属性，如下代码所示：

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

【讨论】：

【解决方案7】：

更现代的方法是使用 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>

【讨论】：

我希望当标签中包含图像和文本时这会起作用。我有一个小图标，后面跟着文字，但文字没有移动。
如果标签和文本是单独的元素，或者如果您将标签也设置为 flexbox...
display:flex 兼容性较差，适用于 chrome 29+