Question

我正在尝试找到一个解决方案，让文本在水平和垂直居中的textarea中输入。水平与text-align: center;一起正常工作，但垂直居中更麻烦。似乎解决方案是使用填充，但是当文本高达3行时，文本不再居中。在下面的小提琴中，我放置了一条红线，这是我的文本区域的中心。我需要它作为文本出现的中心。即使它是1,2,3,4或五行高。因此，如果我有4行文本，则红线需要位于第2行和第3行之间。

我想知道jquery是否可能无法解决这个问题？

JS FIDDLE EXAMPLE

Answer 1

我想出了一个非常简单的解决方案，它可以在您键入时修改顶部填充。

padding-top应始终等于height/2 - font-size。另外，使用 box-sizing: border-box; 可以避免应用于textarea元素的默认样式出现问题。

<强>的jQuery

$('.mytext').on('input', function() {
  var h= this.offsetHeight;
  $(this).css({   //clear current padding and height so we can use scrollHeight below
    paddingTop: 0,
    height: 0
  });

  $(this).css({
    paddingTop: Math.max(0, h/2 - this.scrollHeight/2),
    height: h
  });
});

＆＃13;

$('.mytext')
  .on('input', function() {
    var h = this.offsetHeight;
    $(this).css({
      paddingTop: 0,
      height: 0
    });

    $(this).css({
      paddingTop: Math.max(0, h / 2 - this.scrollHeight / 2),
      height: h
    });
  })
  .trigger('input')
  .focus();

＆＃13;

.mytext {
  resize: none;
  width: 280px;
  height: 150px;
  font-size: 20px;
  text-align: center;
  box-sizing: border-box;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="mytext" placeholder="type text here"></textarea>

＆＃13;

Answer 2

看看这段代码片段，它可能会解决您的问题：

http://codepen.io/desandro/pen/gICqd

它依赖于CSS和包装器div：

#wrap {
  width: 50%;
  position: relative;
  font-family: sans-serif;
  height: 70%;
  border: 2px solid red;
}

#wrap .area {
  resize: none;
  outline: none;
  border: 2px solid;
  display: block;
  width: 100%;
  padding: 0;
  position: absolute;
  top: 0;
  font-family: sans-serif;
  font-size: 20px;
  text-align: center;
}

#wrap textarea.area {
  left: 0;
  height: 100%;
  border: 2px dotted blue;
  background: transparent;
}

#wrap .dummy {
  left: 100%;
}

在textarea中垂直对齐文本

2 个答案: