CSS：如何垂直对齐“div”中的“标签”和“输入”？

考虑following code：CSS：如何垂直对齐“div”中的“标签”和“输入”？

HTML：

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

CSS：

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

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

来源

2010-12-17 Misha Moroshko

据我所知，底线是 “你不能”，最懒惰的方法是使用一个简单的'

'并将'valign ='middle''应用到它的''s。 – BeemerGuy2010-12-17 00:07:59

回答

div { 
    display: table-cell; 
    vertical-align: middle; 
    height: 50px; 
    border: 1px solid red; 
}

这种方法的优点是，你可以改变div的高度，改变文本字段的高度，改变字体大小，一切都将永远留在中间。

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

来源

2010-12-17 00:14:39

看起来优雅:)有谁知道浏览器如何兼容这种方法？ – 2010-12-17 00:25:48

对于IE，我认为它只适用于IE8或更高版本。对于其他网页浏览器，它很好。 – 2010-12-17 00:34:43

我不知道'display：table-cell'。这是在某些浏览器上支持的吗？ – BeemerGuy 2010-12-17 00:41:24

裹标签和输入在具有限定的高度的另一格。在IE中的版本低于8.

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

来源

2010-12-17 00:14:56 Trevor

上的label和input的div（顶部和底部）和vertical-align:middle这可能不起作用使用padding。

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

来源

2010-12-17 00:20:24

这不适用于jsfiddle。我改变了'div'的高度，里面的内容完全没有移动。我错过了什么吗？ – BeemerGuy 2010-12-17 00:39:00

在我看来，布局不应该有固定的像素高度......布局应该流畅地围绕内容流动。但是，我从一天一次的时间里浏览器缩放文本大小时放大和缩小。最近的浏览器实际上会缩放整个页面，因此设置像素高度的效果会更好一些。然而，避免设置像素高度的全新理由......例如响应式布局技术。这就是为什么这将是我的首选方法。 – thirdender 2012-06-26 17:55:00

这工作的跨浏览器，提供了更多的辅助功能，并配有更少的标记。沟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>

来源

2010-12-17 01:48:56 albert

这显然不适用于双线标签。如果你确定标签始终是单行的，那么就有数百万其他的选择。 – Lashae 2013-04-18 07:33:51

+11

这个问题是关于单行标签，我相应地回答。不确定你在这里的意思或意图，但如果x很明显，你应该去做一个例子。至少你可以在我的回答下感到愉快，并感受到你百万胜利的力量。喝彩。 – albert 2013-04-18 08:23:54

这是单线标签的最佳答案。该规范说：“如果未指定for属性，但标签元素具有可标记的与窗体相关联的元素后代，则第一个树形顺序的后代是标签元素的标签控件。”因此，这是唯一可以省略'for'和'id'属性的最简单方法。 – parliament 2016-04-09 01:28:43

我知道这个问题是问两年多前，但对于任何最近的观众，这里是一个替代的解决方案，其中有超过马克 - 弗朗索瓦的解决方案的几个优点：

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

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

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

干杯！

来源

2012-12-27 18:32:03 MusikAnimal

但是，如果标签文本大于一行，则不起作用 – GlennG 2014-06-10 13:31:40

您可以使用display: table-cell属性如下面的代码：

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

来源

2015-10-27 09:25:54 abahet

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

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

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

更复杂的例子...如果你有在柔性流动multible元素，你可以使用对齐自单元素排列不同，以指定的对齐...

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>

来源

2016-10-09 03:36:32

我希望这可以在标签中包含图像和文本时生效。我有一个小图标，后面跟着文字，但是文字没有改变。 – 2017-03-09 16:20:35

它可以工作，如果标签和文字是单独的元素，或者如果你让你的标签也是一个flexbox ... – 2017-03-11 16:05:02

这对我有效！好例子呢！ – Tony 2017-12-05 16:44:06

CSS：如何垂直对齐“div”中的“标签”和“输入”？

回答

相关问题