Comment aligner l'étiquette et la boîte de sélection à la verticale (au milieu)
Pour le CSS gourous là, je ne peux pas comprendre le css qui fait le premier label/sélectionner paire pas moyen d'aligner, mais la seconde ne l'aligner dans le milieu.
Voir le problème dans l'image ci-dessous. Mon but est de faire le premier label/sélectionnez la paire de s'aligner au milieu et à comprendre les règles css qui concrétise.
<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>
C'est ici que vous pouvez le voir en action...Violon
Si le code est "trop grand", puis le réduire au minimum le montant nécessaire pour reproduire votre problème. Ne vous attendez pas de nous balader autour de l'internet pour résoudre vos problèmes pour vous, veuillez lire leMCVE " lignes directrices pour obtenir des conseils. Vous avez plus de 3000 rep (comme je l'ai écris): vous savez mieux.
Si vous ne voulez pas avoir affaire avec un fixe, hauteur de ligne, puis dans votre exemple, vous pouvez toujours faire le conteneur de l'étiquette et sélectionnez l'option afficher la table-cell et définir vertical align milieu
Le code n'est pas trop grand comme je le vois. C'est juste le YUI Pur CSS.
Si vous ne voulez pas avoir affaire avec un fixe, hauteur de ligne, puis dans votre exemple, vous pouvez toujours faire le conteneur de l'étiquette et sélectionnez l'option afficher la table-cell et définir vertical align milieu
Le code n'est pas trop grand comme je le vois. C'est juste le YUI Pur CSS.
OriginalL'auteur John Livermore | 2014-06-04
Vous devez vous connecter pour publier un commentaire.
Un moyen facile de le faire est de donner à l'
label
éléments d'une ligne de hauteur égale à celle de la hauteur de la liste déroulante de sélection. Cependant, cette solution dépend de vos étiquettes d'être seulement une seule ligne de texte, si vous avez des étiquettes qui sont multi-ligne, il ne fonctionnera pas et vous devez utiliser levertical-align
méthode détaillée ci-dessus.Mise À Jour JSFiddle
Oups - parlé trop tôt. Malheureusement, avec les différents moniteurs/résolutions, le problème persiste. L'étiquette n'est pas correctement aligné avec le texte dans le sélectionnez la zone de liste déroulante.
OriginalL'auteur APAD1
OriginalL'auteur aaronburrows
Vous avez d'autres
div
s autour de la premièrelabel
/select
paire, dont la force de ce comportement.Si vous supprimez la mention inutile
div
s autour de la premièrelabel
/select
paire et ajouter la même classe que dans la seconde, vous devriez être bienModifié JSFiddle
OriginalL'auteur Olaf Dietsche
Essayez avec cette verticale aligner correctif:
/Vertical* Aligner Fixe */
Donner de la classe.valign) pour les parents (la div contenant le sélectionner)
Et cette autre classe pour les éléments intérieurs (select + étiquette)
Voir si cela fonctionne.
OriginalL'auteur Gibson
vertical-align:middle;
dans cette solution.vrai - mis à jour...
OriginalL'auteur Abe Hendlish