html - 为什么我的 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>