CSS Vertical align milieu

Je suis en train d'aligner verticalement un élément SPAN au moyen d'un élément parent.

C'est ce que je fais:

CSS Vertical align milieu

Je suis en train d'essayer d'obtenir à la fois le nom d'utilisateur et le mot de passe étiquettes à être alignés verticalement (au milieu) avec les zones de saisie.

C'est mon code HTML:

<div class="login_field_wrap">
    <span>Username</span>
    <input type="text" autocomplete="off" spellcheck="off" id="username" name="username">
    <div class="clear"></div>
</div>

C'est ce que j'ai essayé:

.clear { clear:both; }
.login_field_wrap span {
float:left; vertical-align:middle; font-size:13px; color:#333; font-weight:bold; }
.login_field_wrap input {
float:right; vertical-align:middle; padding:8px 5px; border:solid 1px #AAA;
margin:0px; width:250px; }

Aligne verticalement un élément de l'image à l'intérieur de cet emballage DIV fonctionne tout à fait bien, bien dans Chrome, de toute façon, il ne s'aligne pas avec ma PORTÉE!

Toute aide serait étonnant.

S'il vous plaît être gentil avec vos utilisateurs et plutôt qu'un générique <span>, l'utilisation d'une étiquette qui est explicitement associée au contrôle de formulaire: <label for="username">Username</label>.
J'ai toujours utiliser des étiquettes pour les cases à cocher et les boutons radio en raison de leur petite taille. À l'aide d'une étiquette augmente évidemment la zone cliquable rendre plus facile à utiliser, mais est-il vraiment nécessaire de fournir une étiquette pour une zone de texte qui est 250px x 30px? Lorsque vous naviguez sur internet moi-même, je n'ai jamais cliqué sur une zone de texte de l'étiquette pour se concentrer sur elle. Est-il une autre raison pourquoi je devrais être à l'aide d'une étiquette?
L'augmentation de la zone frappée est juste l'un des avantages de l'utilisation des étiquettes, l'autre raison importante est pour les utilisateurs de lecteur d'écran. En faisant explicitement d'associer les étiquettes avec les contrôles de formulaire, le lecteur d'écran va lire les étiquettes correctement lorsque le formulaire de contrôle est concentré.
Ok, c'est intéressant de lire sur. Merci pour votre commentaire @steveax.

OriginalL'auteur TheCarver | 2012-03-28

  1. 12

    Vertical alignement via CSS peut être difficile, et tout en CSS3 apporte une flopée de goodies pour aider à la, CSS3 est plutôt terne dans le navigateur actuel du marché.

    Pour obtenir cet effet, je mis la line-height des biens de l'enfant de l'élément est égale à la hauteur de son contenant l'élément.

    Par exemple, je voudrais utiliser le code CSS suivant:

    .login_field_wrap { height:30px; /* or whatever is appropriate for your design */
.login_field_wrap span { height:30px; line-height:30px; }
.login_field_wrap input { height:30px; line-height:30px; }

    Le seul inconvénient de l'utilisation de line-height à alignez verticalement quelque chose est de savoir si le texte déborde sur une deuxième ligne, dans ce cas, votre design sera essentiellement pause.

    Cela fonctionne très bien, mais les gens doivent savoir que si le parent de l'élément change de taille dynamiquement l'alignement gâchera (ou au moins rester au sein de l'prédéfini line-height: 30px). Si elle ne change pas, alors vous devriez envisager d'utiliser l'affichage de la table de la méthode. De toute façon, il faut y avoir une meilleure façon de aligne verticalement pertinente des éléments inline. Grande réponse @Moïse.

    OriginalL'auteur Moses

  2. 9

    Il suffit de retirer le float bien de vos span class et mis à display:inline-block et la vertical-align:middle propriété de travail, comme suit:

    .login_field_wrap span {
    color: #333333;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    vertical-align: middle;
}

    Edit: nettoyé votre code un peu, voici une démo qui devrait fonctionner sur tous les navigateurs.
    http://jsfiddle.net/kUe3Y/

    Cela a fonctionné pour mon sitch. Merci.

    OriginalL'auteur Andres Ilich

  3. 2

    J'ai trouvé la meilleure façon de le faire est de fixer le conteneur parent propriété d'affichage à table et l'enfant de propriété d'affichage à table-cell

    #parent{
  display:table;
}

#child{
  display:table-cell;
  vertical-align:middle;
}

    J'ai été en mesure d'obtenir ce à aligner verticalement un point d'ancrage de l'élément à l'intérieur d'un div.

    Je l'ai mis dans les termes de votre question dans cette jsFiddle.

    OriginalL'auteur Joe Badaczewski

  4. 1

    Je n'ai jamais été en mesure d'obtenir vertical-align de travailler dans autre chose que des <td>s.

    Une solution de contournement, j'ai souvent l'utilisation serait de définir une hauteur de .login_field_wrap, puis définissez la line-height propriété dans le <span> être égale à .login_field_wraphauteur.

    Difficile, hein?! J'ai réussi à obtenir un élément de l'image à alignées à la verticale (au milieu) à l'intérieur d'un emballage DIV mais il ne peut pas le faire avec des la durée!!

    OriginalL'auteur Paul

  5. -4

    Je pense text-align:center; doit travailler sur des éléments trop. Si je ne me trompe pas, qui travaille habituellement, même si pas sur le texte.

    Text-align centre horizontalement aligne le texte et certains éléments. Je suis à la recherche pour l'alignement vertical fixé à moyen comme à la question titre l'indique. Merci de faire l'effort, peu importe.

    OriginalL'auteur corvid