выровнять метку и текстовое поле по вертикали во всех браузерах

Question

Существует ли простой способ выравнивания метки с текстовым полем во всех основных браузерах (т. Е. Включая IE7? Я установил display на inline-block на моей метке и текстовом поле, которое, кажется, работает везде, но в IE7, где метка включена нижняя часть дел.

<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:1 hasLayout для имитации объявления со взломом в виде звезды, чтобыцель 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*/
}

Демо