textarea étiquette vertical-align: middle

Je suis en train de l'alignement de l'étiquette pour cette zone de texte dans le milieu de la zone de texte, mais il n'est tout simplement pas de travail. Le résultat ressemble à quelque chose comme ceci:

          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx      
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxx    
Synopsis: xxxxxxxxxxxxxxxxxxxxxxxxxxxx

Voici le code que j'ai essayé. TY!

<style>
label textarea{
 vertical-align: middle;
}
</style>

<label>Synopsis: <textarea style="border: none" rows="7" cols="60">$v_Synopsis</textarea></label>
Pourquoi est entrée à l'intérieur de l'étiquette?
<textarea> va après </label>. Ensuite, jsfiddle votre code.
Lorsqu'un contrôle est à l'intérieur d'un <label>, le label est associé avec le contrôle. Vous pouvez également utiliser l'explicite for attribut.

OriginalL'auteur Mike | 2013-10-22

  1. 9

    CODEPEN DÉMO

    HTML

     <div>
  <label for="textarea">Textarea:</label>
  <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>

    CSS

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

}
    Merci, c'était rapide!
    cependant lorsque je l'ai rajouter dans le style="border: none" pour le textarea l'étiquette remonte à l'origine de spot. Pas sûr de ce que ça se fait.
    Peut-être que vous pourriez faire de JSfiddle pour démontrer votre problème comme la suppression de la frontière (probablement une mauvaise UX) ne fait aucune différence dans la Codepen exemple?
    jsfiddle.net/rC5nj vous ne savez Pas si je l'ai fait dès la première fois à l'aide de JSfiddle. il montre la sortie de l'étiquette sur le dessus de la zone de texte, la production réelle est sur le côté gauche sur la dernière ligne. Je suis en train de l'obtenir sur le côté gauche du milieu.
    Ici: jsfiddle.net/pG4KA/1 Vous avez oublié le inline-block. La frontière de suppression ne recule pas devant le textarea...il semble juste comme ça.

    OriginalL'auteur Paulie_D

  2. 1

    vous pouvez le faire comme ceci: 

    label { display:inline-block; vertical-align:central; }

textarea { display:inline-block; vertical-align:middle; }

    OriginalL'auteur Rogo

  3. 0

    vous avez oublié : ","

        <style>
label, textarea{
 vertical-align: middle;
}
</style>

<label>Synopsis: </label> <textarea style="border: 1" rows="3" cols="10"></textarea>
    Je sais ce qui va mal tout le long, j'avais besoin de redimensionner automatiquement la zone de texte à l'aide de javascript.

    OriginalL'auteur ColoO

  4. 0

    Ce sera toujours travailler et vous avez la possibilité de placer l'étiquette à qui que ce soit; en haut, au milieu ou en bas

    HTML:

    <div id="mydiv">
    <label for="mytextarea">My Label</label>
    <textarea name="mytextarea"></textarea>
</div>

    CSS:

    #mydiv{
    display: table-cell;
}

label, textarea{
    display: inline-block;
    vertical-align: middle; /** Can be switched to 'top' if you so wish **/
}

    OriginalL'auteur KE50

  5. 0

    Cela a fonctionné pour moi.
    D'abord le textarea est flottant à droite, puis le mot "adresse" apparaît devant elle.
    C'est dans l'ordre inverse, mais affiche correctement

    <p>
<span style="float:right;"><textarea rows="3" cols="32" name="Add"></textarea></span>
<span style="float:right;">Address</span>
</p>

    :

    Address┌──────────────┐

    OriginalL'auteur fiedler