如果只有一行带有文本，则垂直居中textarea文本

Question

我有一个2行高的textarea。当textarea中只有一行文本时，它看起来像这样：

如果只有一行得到文字，我正在寻找的方法是让它看起来像这样：

如果textarea中有2行有文字，我希望它看起来像这样正常：

以下是代码：

<textarea class='input_box_menu'>Test text</textarea>

.input_box_menu {
    text-align: center;
    width: 217px;
    height: 35px;
    resize: none;
    float: left;
}

帮助非常感谢！
谢谢，
通帕

Answer 1

这是一个小jQuery片段，可以完全按照您的意愿执行：

$(function () {
    fixVAlign($('.input_box_menu'));
    $('.input_box_menu').on('keyup', function () {
        fixVAlign($(this))
    });
});

function fixVAlign(field) {
    if (field.val().length < 27) {
        field.css('line-height', '35px');
    } else {
        field.css('line-height', 'normal');
    }
}

此处为jsfiddle

Answer 2

好的，所以我的第一个思路是查找css属性vertical-align here。

  

适用于：内联级和 table-cell 元素

所以看看你的例子，内联级别的对象似乎是不可能的 - 那么为什么不用表格呢？

试试这个：

.box {
    display: table-cell;
    height: 200px;
    width: 400px;
    background: #d4d4d4;
    text-align: center;
    vertical-align: middle;
}

<div class="box">
    Text Text Text
</div>

请注意，有span的{​​{1}}或div div的方法可以做到这一点，这就是我选择的方式解释这个问题。

修改

忽略我的答案，因为它对textareas没有任何作用。

See this pen on CodePen for an example of a good fix.

Answer 3

因为您说您可以使用JavaScript，所以最简单的方法是将line-height的初始<textarea>设置为等于其初始height。然后onkeypress或类似的JavaScript事件，您可以检查textarea.value.length，如果它足够长，那么您可以将行高设置回font-size。