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

Question

在所有主流浏览器（例如，包括IE7）中，是否有一种简单的方法可以将标签与文本对齐（即包括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的声明以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