Comment aligner l'étiquette et la zone de sélection verticalement (au milieu)

Question

Pour les gourous du CSS, je n'arrive pas à comprendre le CSS qui fait que la première paire étiquette/sélection ne s'aligne pas au milieu, mais la seconde s'aligne au milieu.

Voir le problème dans l'image ci-dessous.Mon objectif est d'aligner la première paire étiquette/sélection au milieu et de comprendre les règles CSS qui permettent que cela se produise.

<div class="pure">
    <form class="pure-form-inline">
        <div class="pure-g">
            <div class="pure-u labelArea">
                <label>Choose Project:</label>
            </div>
            <div class="pure-u-1-4">
                <select></select>
            </div>
        </div>
        <div class="pure-control-group">
            <label>Choose Customer:</label>
            <select></select>
        </div>
    </form>
</div>

Voici où vous pouvez voir cela en action...Violon

Answer 1

Un moyen simple de procéder consiste à donner au label éléments une hauteur de ligne égale à celle de la hauteur du sélecteur déroulant.Cependant, cette solution dépend du fait que vos étiquettes ne comportent qu'une seule ligne de texte. Si vous avez des étiquettes multilignes, cela ne fonctionnera pas et vous devez utiliser l'option vertical-align méthode détaillée ci-dessus.

label {
    line-height:25px;
}

JSFiddle mis à jour

Answer 2

label, select {
    display: inline-block;
    vertical-align: middle;
}

Answer 3

You have additional divs around the first label/select pair, which force this behaviour.

If you remove the unnecessary divs around the first label/select pair and add the same class as in the second, you should be fine

<div class="pure">
    <form class="pure-form-inline">
        <div class="pure-control-group">
            <label>Choose Project:</label>
            <select></select>
        </div>
        <div class="pure-control-group">
            <label>Choose Customer:</label>
            <select></select>
        </div>
    </form>
</div>

Modified JSFiddle

Answer 4

Try with this vertical align fix:

/* Vertical Align Fix */

.valign:before {
    content:"";
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
.valign > * {
    display: inline-block;

}
.valign-m { vertical-align: middle; }

Give the class (.valign) to the parent (The div containing the select)

And this other class to the inner elements (select + label)

See if it works.

Answer 5

.pure .pure-u {
    line-height:25px;
}