textarea label vertical-align: middle

Ich versuche, richten Sie die Beschriftung für das Textfeld in der Mitte der text-box, aber es funktioniert einfach nicht. Die Ausgabe sieht ungefähr so aus:

          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx      
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxx    
Synopsis: xxxxxxxxxxxxxxxxxxxxxxxxxxxx

Hier ist der code, den ich versucht habe. TY!

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

<label>Synopsis: <textarea style="border: none" rows="7" cols="60">$v_Synopsis</textarea></label>
  • Warum ist der Eingang im inneren des Labels?
  • <textarea> geht nach </label>. Als Nächstes jsfiddle code.
  • Wenn ein Steuerelement in einem <label> ist das label im Zusammenhang mit der Kontrolle. Sie können auch die explizite for Attribut.
InformationsquelleAutor Mike | 2013-10-22
  1. 10

    CODEPEN-DEMO

    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;

}
    • Vielen Dank, das war schnell!
    • allerdings, wenn ich wieder hinzufügen style="border: none" für die textarea die Bezeichnung geht zurück zu seiner ursprünglichen Stelle. Nicht sicher, was es damit auf sich.
    • Vielleicht könnte man machen, JSfiddle, um zu demonstrieren, Ihr Problem, wie das entfernen der Grenze (wohl schlechte UX) macht keinen Unterschied in der Codepen-Beispiel?
    • jsfiddle.net/rC5nj Nicht sicher, ob ich Tat das richtige erste mal mit JSfiddle. es zeigt die Ausgabe der Beschriftung auf der Oberseite der text-box, die Leistung ist auf der linken Seite auf die Letzte Zeile. Ich bin versucht, es zu bekommen auf der linken Seite Mitte.
    • Hier: jsfiddle.net/pG4KA/1 vergessen Sie die inline-block. Die Grenze zum entfernen nicht verkleinern in der textarea...es ist einfach wie es aussieht.
    • sehr gut. dies ist eine Aufgabe, die alle browser?

    InformationsquelleAutor Paulie_D
  2. 1

    kannst du es so machen: 

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

textarea { display:inline-block; vertical-align:middle; }
    InformationsquelleAutor Rogo
  3. 0

    du hast vergessen : ","

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

<label>Synopsis: </label> <textarea style="border: 1" rows="3" cols="10"></textarea>
    • Ich weiß, was falsch war, alle zusammen, ich brauchte, um das auto-resize das Textfeld mit javascript.
    InformationsquelleAutor ColoO
  4. 0

    Das funktioniert immer, und Sie haben die Flexibilität für die Platzierung der Beschriftung entweder oben, Mitte oder unten

    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 **/
}
    InformationsquelleAutor KE50
  5. 0

    Dieser arbeitete für mich.
    Zuerst wird die textarea geschwommen rechts, dann das Wort "Adresse" wird angezeigt, bevor es.
    Es ist in umgekehrter Reihenfolge, aber korrekt angezeigt

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

    Zeigen:

    Address┌──────────────┐
    InformationsquelleAutor fiedler
Schreibe einen Kommentar