alignez verticalement d'une étiquette et d'une zone de texte dans tous les navigateurs

Est-il un moyen facile d'aligner une étiquette avec une zone de texte dans tous les principaux navigateurs (c'est à dire y compris IE7? J'ai mis l'affichage de inline-block sur mon label et textbox qui semble fonctionner partout, mais dans IE7, où l'étiquette est sur le bas de la 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;
}
Poster du code, de sorte que nous pouvons prendre un coup d'oeil.
Je sais qu'il est considéré comme le sale mais j'ai toujours utiliser des tableaux pour cela. C'est le seul moyen que j'ai trouvé pour gérer de manière fiable.

OriginalL'auteur Joe Cartano | 2012-03-03

  1. 8

    La display:inline-block déclaration n'est pas entièrement pris en charge par IE7 et ci-dessous, vous devez utiliser des display:inline au lieu en conjonction avec la zoom:1 hasLayout hack pour imiter la déclaration auprès de la star hack pour cible IE7. Pour aligner à la fois la zone de texte et labelwe pouvez utiliser le vertical-align:middle des biens, comme suit:

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

    Démo

    Cette solution crée simplement une plus grande zone de texte/de l'étiquette, pas un centré sur l'élément. La plupart des autres solutions semblent faire la même chose. De sorte qu'en posant la question autrement: comment créer un centrés verticalement image?
    "la déclaration n'est pas entièrement pris en charge par IE7" en 2012, OK, mais pour aujourd'hui LOL

    OriginalL'auteur Andres Ilich