Html 在所有浏览器中垂直对齐标签和文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9542258/
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
vertically align a label and a textbox in all browsers
提问by Joe Cartano
Is there an easy way to align a label with a textbox in all major browsers (i.e. including IE7? I set display to inline-block on my label and textbox which seems to work everywhere but in IE7, where the label is on the bottom of the div.
是否有一种简单的方法可以在所有主要浏览器（即包括 IE7）中将标签与文本框对齐？我将标签和文本框的显示设置为内联块，这似乎在任何地方都可以使用，但在 IE7 中，标签位于底部div。
<label class="inputLabel" for="emailTextBox">
Email:</label>
<input class="textBox" type="text" id="emailTextBox" value=" Email address" />
input.textBox
{
margin-top: 5px;
margin-bottom: 5px;
height: 30px;
width: 350px;
font-size: 15px;
font-family: Verdana;
line-height: 30px;
display:inline-block;
}
label.inputLabel
{
font-family: Verdana;
font-size: 15px;
line-height: 30px;
display:inline-block;
}
回答by Andres Ilich
The display:inline-blockdeclaration is not fully supportedby IE7 and below, so you have to use display:inlineinstead in conjunction with the zoom:1hasLayout hack to imitate the declaration with the star hack to target IE7. To align both the textbox and labelwe can use the vertical-align:middleproperty, like so:
IE7 及以下版本display:inline-block不完全支持该声明，因此您必须display:inline与zoom:1hasLayout hack结合使用以模仿带有 star hack 的声明以针对 IE7。要同时对齐文本框和标签，我们可以使用该vertical-align:middle属性，如下所示：
CSS
CSS
input.textBox {
margin-top: 5px;
margin-bottom: 5px;
height: 30px;
width: 350px;
font-size: 15px;
font-family: Verdana;
line-height: 30px;
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
vertical-align:middle;
}
label.inputLabel {
font-family: Verdana;
font-size: 15px;
line-height: 30px;
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
}
