中间（垂直）对齐 a 内的文本<textarea>&lt;i&gt;&lt;/div&gt;&lt;/i&gt; &lt;b&gt;&lt;/div&gt;&lt;/b&gt;</textarea><div id="text_translate"><p> 我有一个多行搜索框，我希望所有内容都在中间对齐。 是否可以将&lt;textarea&gt;的内容垂直居中？</p></div>

Question

我有一个多行搜索框，我希望所有内容都在中间对齐。 是否可以将<textarea>的内容垂直居中？

Answer 1

您可以使用垂直填充来伪造它。

textarea {
    padding: 30px 0;
}

通常，您可以使用line-height属性，但不能使用多于一行的文本。

Answer 2

有 HTML5 contenteditable属性。http://www.w3schools.com/tags/att_global_contenteditable.asp

也许div标签而不是textarea可以解决您的问题。

Answer 3

回到我问这个问题的日子里，我尝试使用 textarea 实现这一点，这在没有脚本的情况下是不可能的。 答案是在 style="vertical-align: middle" 的表格单元格上添加 HTML5 的 contenteditable="true"。 如果一个项目允许使用现代 HTML，这是一个相当简单有效的解决方案。

如果不是将<table>和<tr>和<td>到您的标记中，而是想要像<div>这样的常规内容，您仍然需要其中两个：

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

Answer 4

您也许能够制作一个脚本来确定元素高度、行高和文本行数，并计算 padding-top，甚至 \\n 以添加文本。

不过，我认为仅使用 CSS 是不可能的。

Answer 5

不是解决方案而是解决方法，将其包装在label并将 textarea 的位置设置为中间。 警告：一旦文本内容达到其限制，必须重新计算 textarea 行。

小提琴： https : //jsfiddle.net/syjfoqzx/

Answer 6

您不能将<textarea>的内容垂直居中。 相反，请使用启用了内容编辑的<div> 。 然后使用 Flexbox 布局使文本居中。

 [contenteditable] { /* Use Flexbox to center the content */ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; /* Apply min height of 4 lines */ line-height: 1.2; min-height: calc(1.2em * 4); /* Border styles */ border: 1px solid gray; border-radius: 5px; }

 <div contenteditable="true">This text is editable.<br>Go ahead and change it.</div>