Html CSS：如何在“div”内垂直对齐“标签”和“输入”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4466596/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: How to align vertically a "label" and "input" inside a "div"?
提问by Misha Moroshko
Consider the following code:
考虑以下代码：
HTML:
HTML：
<div>
<label for='name'>Name:</label>
<input type='text' id='name' />
</div>
CSS:
CSS：
div {
height: 50px;
border: 1px solid blue;
}
What would be the easiest method to put the labeland the inputin the middle of the div(vertically) ?
将label和放在（垂直）input中间的最简单方法是div什么？
回答by Marc-Fran?ois
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>The advantages of this method is that you can change the height of the div, change the height of the text field and change the font size and everything will always stay in the middle.
这种方法的优点是你可以改变 的高度div，改变文本字段的高度和改变字体大小，一切都将始终保持在中间。
回答by Holger Will
a more modern approach would be to use css flex-box.
更现代的方法是使用 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>a more complex example... if you have multible elements in the flex flow, you can use align-self to align single elements differently to the specified align...
一个更复杂的例子...如果您在 flex 流中有多个元素，您可以使用 align-self 将单个元素与指定的 align 以不同的方式对齐...
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>its also super easy to center horizontally and vertically:
它也非常容易水平和垂直居中：
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>回答by albert
This works cross-browser, provides more accessibility and comes with less markup. ditch the div. Wrap the label
这可以跨浏览器工作，提供更多的可访问性并带有更少的标记。放弃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>
回答by MusikAnimal
I'm aware this question was asked over two years ago, but for any recent viewers, here's an alternative solution, which has a few advantages over Marc-Fran?ois's solution:
我知道这个问题是两年前提出的，但对于最近的观众来说，这里有一个替代解决方案，它比 Marc-Fran?ois 的解决方案有一些优势：
div {
height: 50px;
border: 1px solid blue;
line-height: 50px;
}
Here we simply only add a line-heightequal to that of the height of the div. The advantage being you can now change the display property of the div as you see fit, to inline-blockfor instance, and it's contents will remain vertically centered. The accepted solution requires you treat the div as a table cell. This should work perfectly, cross-browser.
这里我们只是简单地添加一个line-height等于 div 高度的值。优点是您现在可以根据需要更改 div 的显示属性，inline-block例如，它的内容将保持垂直居中。接受的解决方案要求您将 div 视为表格单元格。这应该可以完美运行，跨浏览器。
The only other advantage being it's just one more CSS rule instead of two :)
唯一的另一个优点是它只是多了一个 CSS 规则而不是两个 :)
Cheers!
干杯!
回答by Gabriele Petrioli
Use paddingon the div(top and bottom) and vertical-align:middleon the labeland input.
使用padding上div（顶部和底部），并vertical-align:middle在label和input。
example at http://jsfiddle.net/VLFeV/1/
回答by Trevor
Wrap the label and input in another div with a defined height. This may not work in IE versions lower than 8.
将标签和输入包装在另一个具有定义高度的 div 中。这可能不适用于低于 8 的 IE 版本。
position:absolute;
top:0; bottom:0; left:0; right:0;
margin:auto;
回答by abahet
You can use display: table-cellproperty as in the following code:
您可以使用display: table-cell以下代码中的属性：
div {
height: 100%;
display: table-cell;
vertical-align: middle;
}
