11
votes

Étiquette Texarea Vertical-Aligner: Milieu

J'essaie d'aligner l'étiquette de cette zone de texte au milieu de la zone de texte, mais cela ne fonctionne tout simplement pas. La sortie ressemble à quelque chose comme ceci: xxx pré>

voici le code que j'ai essayé. TY! P>

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

<label>Synopsis: <textarea style="border: none" rows="7" cols="60">$v_Synopsis</textarea></label>

html css vertical-alignment textarea

3 commentaires

Pourquoi l'entrée est-elle à l'intérieur de l'étiquette?

</ code> va après <code> </ étiquette> </ code>. Ensuite, jsfiddle votre code.</p> <hr> <p>@Paulie_d Lorsqu'un contrôle est à l'intérieur d'un <code> <label> </ code>, l'étiquette est associée au contrôle. Vous pouvez également utiliser l'attribut Explicit <code> pour </ code>.</p> <hr> </div> </div> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="2186005983" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>  <p class="mt-4 font-weight-bold">5 Réponses :</p> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 17<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> <a href="http://codepen.io/paulie-d/pen/gedml" rel="noreferrer"> <strong> Codepen Demo strong> </strong></a> <p> HTML P> HTML P > </p><pre>label, textarea{ display:inline-block; vertical-align:middle; } </pre></p> </div> <hr>  <div class="pl-5"> <small class="text-muted">5 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Merci, c'était rapide! </p> <hr> <p class="answer-comment"> Cependant, lorsque j'ajoute de retour dans Style = "Border: None" pour le Texarea, l'étiquette revient à son point d'origine. Je ne sais pas ce qui se passe avec ça. </p> <hr> <p class="answer-comment"> Peut-être que vous pourriez faire Jsfiddle pour démontrer votre problème comme supprimant la frontière (probablement pauvre UX) ne fait aucune différence dans l'exemple Codepen? </p> <hr> <p class="answer-comment"> <a href="http://jsfiddle.net/rc5nj/" rel="nofollow noreferrer"> jsfiddle.net/rc5nj </a> Vous ne savez pas si je faisais cela à la première première fois en utilisant jsfiddle. Il affiche la sortie de l'étiquette en haut de la zone de texte, la sortie réelle est du côté gauche de la dernière ligne. J'essaie de l'obtenir sur le côté gauche du milieu. </p> <hr> <p class="answer-comment"> Ici: <a href="http://jsfiddle.net/pg4ka/1/" rel."nofollow NOREFERRER"> JSFIDDLE.net/pg4KA/1 </a> Vous avez oublié le <code> inline-block </ code >. L'enlèvement des frontières ne diminue pas le Texarea ... Cela ressemble à cela. </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> -1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Vous avez oublié: "," <pre> <style> label, textarea{ vertical-align: middle; } </style> <label>Synopsis: </label> <textarea style="border: 1" rows="3" cols="10"></textarea> </pre></p> </div> <hr>  <div class="pl-5"> <small class="text-muted">1 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Je sais ce qui n'allait pas tout au long, je devais redimensionner automatiquement la zone de texte à l'aide de JavaScript. </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Cela a fonctionné pour moi. D'abord, la Textarea est complètement flottante, puis le mot "adresse" apparaît avant cela. C'est dans l'ordre inverse, mais affiche correctement <pré> xxx </ pré> <p> à afficher: </ p> <pré> xxx </ pré> </ p> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> -1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Cela fonctionnera toujours et vous avez la possibilité de placer l'étiquette à l'une ou l'autre; haut, milieu ou inférieur <p> html: </ p> <pré> xxx </ pré> <p> CSS: </ p> <pré> xxx </ pré> </ p> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Vous pouvez le faire comme ceci: <pre>label { display:inline-block; vertical-align:central; } textarea { display:inline-block; vertical-align:middle; } </pre></p> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> </div> <div class="col-lg-3 col-md-12 col-12 col-sm-12" > <div class="related"> <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe> <p class="font-weight-bold">Articles qui pourrait vous intéresser :</p> <a href="/question/google-chrome-uncaught-promis-domexception-lors-de-la-lecture-audio" class=""> Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO </a> <hr> <a href="/question/select2-ne-s-39-affiche-pas-correctement-dans-le-mode-bootstrap" class=""> Select2 ne s'affiche pas correctement dans le mode bootstrap </a> <hr> <a href="/question/le-bootstrap-de-twitter-a-t-il-des-classes-utilitaires-de-taille-de-police" class=""> Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police? </a> <hr> <a href="/question/comment-puis-je-d-eacute-finir-un-format-pour-les-nombres-d-39-entr-eacute-e-dans-blazor" class=""> Comment puis-je définir un format pour les nombres d'entrée dans Blazor </a> <hr> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="4267220326" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <script type="text/javascript" src="/js/purecookie.js"></script> </div> <div class="container col-lg-8 col-md-12 ads-footer"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="5580301997" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </body> <footer> <div class="row col-lg-12 col-md-12 text-muted"> © 2020 www.devfaq.fr - Licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license"> cc by-sa 3.0 </a> with <a href="https://stackoverflow.blog/2009/06/25/attribution-required/" rel="license"> attribution required</a>. </div> </footer> </html>