为什么我的 textarea 值在删除滚动条后没有居中？

Question

我正在尝试创建一个没有滚动条且文本居中的文本区域。

我已通过将溢出样式设置为自动或隐藏来解决滚动条问题。但是，这会导致文本停止居中。

以下显示了所有文本区域的样式属性：

textarea
{
    overflow:auto;
    width: 200px;
    height: 60px; 
    text-align:center;
    vertical-align:middle;   
}

以下显示了我的文本区域之一的代码：

<textarea ID="textarea1" style="position:absolute; left:600px;">
     Bridge Crane
</textarea>

这就是文本区域现在的样子：

Answer 1

它似乎没有居中，因为您在开始和结束标记内有一堆空白。当您考虑整个值时，内容实际上是居中的。只需删除空格。

textarea {
    overflow: auto;
    width: 200px;
    height: 60px;
    text-align: center;
    vertical-align: middle;
}

<textarea ID="textarea1">Bridge Crane</textarea>

Answer 2

看起来你想要 vertical-align: middle; 因为你在 CSS 里面有它，但坏消息是我们不能只用 <textarea></textarea> 来做。我们必须使用 div-content-editable.

div {
    overflow: auto;
    width: 200px;
    height: 60px;
    border:1px solid black; /* a border just for styling */
    text-align:center; /* text is center horizontally */
    display: table-cell; /* yes, so we can use vertical-align: middle */
    vertical-align: middle; 
}

<div contenteditable="true">
    Row Row Row your boat
</div>

为什么我的 textarea 值在删除滚动条后没有居中？

Why isn't my textarea value centered when scrollbars are removed?

html

css

textarea