CSS：如何垂直alignment“标签”和“input”内的“股利”？

考虑下面的代码 ：

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的高度，改变文本字段的高度和改变字体大小，一切都会一直停留在中间。

http://jsfiddle.net/53ALd/6/

Answer 2

一个更现代的方法是使用CSS弹性盒。

 div { height: 50px; background: grey; display: flex; align-items: center } 

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

Answer 3

这是跨浏览器，提供更多的可访问性，并带有较less的标记。 沟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

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

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

这里我们只需要添加一个与div line-height相同的line-height 。 好处是你现在可以改变div的显示属性，如你认为合适的，例如inline-block ，它的内容将保持垂直居中。 被接受的解决scheme要求您将div视为表格单元格。 这应该是完美的，跨浏览器。

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

干杯!

Answer 5

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

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

Answer 6

包装标签并input另一个具有指定高度的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; }