Text mittig (vertikal) innerhalb von a ausrichten

Lesezeit: 2 Minuten

Es ist ein mehrzeiliges Suchfeld, also möchte ich, dass alles in der Mitte ausgerichtet ist. Ist es möglich?

Was meinst du mit “mehrzeiliges Suchfeld”? Können Sie uns ein Beispiel geben?

– cdeszaq

15. April 2011 um 13:46 Uhr
textareas sind für die Eingabe von Text, es gibt keine Möglichkeit, ihn zu formatieren. Können Sie das, was Sie erreichen wollen, erweitern? Möglicherweise gibt es bessere Lösungen.

– RoToRa

15. April 2011 um 14:47 Uhr
Jap, damals, als ich das gefragt habe, habe ich versucht, dies mit Textarea zu erreichen, was ohne Skripting wirklich nicht möglich ist. Die Antwort war das Hinzufügen von contenteditable=”true” von HTML5 zu einer Tabellenzelle mit style=”vertical-align: middle”. Wenn das eigene Projekt modernes HTML zulässt, ist dies eine ziemlich einfache und effektive Lösung.

– Daniel Birowsky Popeski

5. Januar 2013 um 9:53 Uhr

Alex

Sie können es mit vertikaler Polsterung vortäuschen.

textarea {
    padding: 30px 0;
}

Im Allgemeinen könnten Sie die verwenden line-height Eigenschaft, aber Sie können nicht mit mehr als einer Textzeile.

auto ist kein gültiger Wert zum Auffüllen

– Danield

20. November 2012 um 12:45 Uhr
Was wäre die magische universelle Zahl, die hier verwendet werden sollte? Kann es aus der globalen Schriftgröße berechnet werden? Zu Ihrer Information, AirBNB (Web-App) scheint dies in der klebrigen unteren Leiste der Nachrichtenantwort zu tun.

– MarsAndBack

13. Februar um 20:29 Uhr

Da ist HTML5 contenteditable Attribut.
http://www.w3schools.com/tags/att_global_contenteditable.asp

Vielleicht der div tag statt textarea kann dein Problem lösen.

Damals, als ich das gefragt habe, habe ich versucht, dies mit Textarea zu erreichen, was ohne Skripting wirklich nicht möglich ist. Die Antwort war das Hinzufügen von contenteditable=”true” von HTML5 zu einer Tabellenzelle mit style=”vertical-align: middle”. Wenn das eigene Projekt modernes HTML zulässt, ist dies eine ziemlich einfache und effektive Lösung.

Wenn anstatt hinzuzufügen <table> und <tr> und <td> Zu Ihrem Markup möchten Sie etwas Regelmäßiges wie a <div>bräuchten Sie noch zwei davon:

<div style="display: table">
  <div 
    style="display: table-cell; vertical-align: middle"
    contenteditable="true">
    I am vertically aligned
  </div>
</div>

Heutzutage würde ich verwenden flex Anstatt von table-cell. Also landest du bei <div style="display: flex; align-items: center" contenteditable="true">

– Maid

16. Juli 2021 um 22:53 Uhr

Möglicherweise können Sie ein Skript erstellen, das die Elementhöhe, die Zeilenhöhe und die Textzeilen bestimmt und ein Padding-Top berechnet oder sogar \n, um den Text voranzustellen.

Ich glaube nicht, dass dies nur mit CSS möglich ist.

keine Lösung, sondern eine Problemumgehung, packen Sie es in ein label und stellen Sie die Position des Textbereichs auf die Mitte ein. Vorbehalt: Die Textarea-Zeilen müssen neu berechnet werden, sobald der Textinhalt seine Grenze erreicht.

Geige: https://jsfiddle.net/syjfoqzx/

14301400cookie-checkText mittig (vertikal) innerhalb von a ausrichten

#CSS #html