如何从textarea的垂直中间开始输入

Question

我有一个textarea，就像这样

<textarea rows="10" cols="50"></textarea>

默认情况下，光标将从textarea的左上角开始，但我希望它从textarea的垂直和水平中心开始，就像在表格单元格中对齐的文本一样。< / p>

我通过应用text-align:center实现了横向中心，但是如何使其垂直居中？

这样的事情：

如果输入更多文字，应该是这样的。

我试过这个CSS：

textarea {
    vertical-align:middle;
    text-align:center;
    display:table-cell;
}

Answer 1

我想不出只用<textarea>做到这一点的方法，但我有一个demo几乎可以使用contenteditable <div>。从那篇文章：

  

对于contenteditable的浏览器支持非常好

我看到的唯一问题是当文本填充<div>展开的垂直空间时。我想不出任何方法可以在CSS中阻止这种情况（我尝试了许多不同的属性！）。应该可以在JavaScript中拦截它并停止<div>扩展。

<强> HTML

<div contenteditable="true"></div>

<强> CSS

div {
    height:150px;
    width:350px;
    border:1px solid black;
    vertical-align:middle;
    text-align:center;
    display:table-cell;
}

Answer 2

你必须遵循css的代码。

<style>
textarea {
    text-align:center;
    padding:50px 0;
    -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
        box-sizing: border-box;
    display:inline-block;
}
</style>

Answer 3

好的，我 fiddled 了一下，想出了一个解决方案，模仿你需要的东西，它是一个带有textarea的div：

<强> HTML

<div id="expandedText">
    <textarea></textarea>
</div>

<强> CSS

div#expandedText {
    width: 250px;
    height: 50px;

    background-color: #fff;
    padding: 50px 10px 40px 10px;
    border: 1px solid #aaa;

    margin: 10px auto;
    text-align: center;
}

div#expandedText > textarea {
    width: 250px;
    height: 50px;

    overflow: hidden;
    text-align: center;
    resize: none;

    outline: 0;
    border: 0;
}