删除滚动条后，为什么我的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>