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

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及以下,所以你必须使用display:inline,而不是与结合zoom:1hasLayout的黑客模仿与明星的宣言劈死目标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*/
}

演示