CSS:如何在"div“中垂直对齐"label”和"input“？
CSS:如何在"div“中垂直对齐"label”和"input“？
提问于 2010-12-17 08:05:52
考虑一下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中间的最简单方法是什么？
回答 6
Stack Overflow用户
回答已采纳
发布于 2010-12-17 08:14:40
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的高度，更改文本字段的高度和字体大小，所有内容都将始终位于中间。
Stack Overflow用户
发布于 2016-10-09 11:36:33
一种更现代的方法是使用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>
Stack Overflow用户
发布于 2010-12-17 09:48:57
这可以跨浏览器工作，提供更多的可访问性，并且带有更少的标记。丢弃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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4466596
复制相关文章
相似问题