在所有浏览器中垂直对齐标签和文本框

Question

是否有一种简单的方法可以在所有主要浏览器（即包括 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;
}

Answer 1

display:inline-block 声明不是 IE7 及更低版本的 fully supported，因此您必须使用 display:inline 与 zoom:1 hasLayout hack 来模仿声明，并使用 star hack 来定位 IE7。要对齐文本框和标签，我们可以使用vertical-align:middle 属性，如下所示：

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*/
}

Demo