如何在多行文本仍环绕在下面的输入/文本区域元素中垂直居中？

Question

我正在使用Ionic 3，所以所涉及的元素是我正在样式化的an的内部（本来我是在an的内部的，但是由于绝对没有办法包装单行输入元素，因此我被迫使用textarea ）。 我需要有一个textarea元素（我不在乎有多少行），用户可以在其中键入多行文本。但是我还需要该文本的开头位于textarea元素的确切中心（以与构成整体的其他元素对齐。

input vs textarea

这些高度是百分比值，因此尝试线高，垂直对齐和类似操作均未成功。我尝试了display：flex和居中，还显示了：table-cell和垂直对齐，并且在任何一个上都没有骰子。由于它是Web和移动应用程序，因此由于平台不同，我在填充顶部方面也没有成功。

我希望文本区域内的文本开头从文本区域的中心开始，以便与其他内容对齐（如上图所示），但也可以将新行换成文本变得比文字区域的宽度还要长。

Answer 1

我想我终于弄清楚了这一点，它似乎可以在Web和移动设备上使用。 这是代码...

setTimeout(() => {
  const textarea: HTMLHtmlElement = window.document.querySelector('.wizard_statement_text');
  const lineHeight = Number(window.getComputedStyle(textarea).lineHeight.slice(0, -2));
  const h = textarea.getBoundingClientRect().height;
  const top = h/2 - lineHeight/2;
  textarea.style.paddingTop = `${top}px`;
}, 100);

基本上，我需要setTimeout才能为textarea的高度获取正确的getBoundingClientRect值。然后我将其切成两半，作为真正的中间部分。我还需要文本区域的实际行高，并将其切成两半，以减去以获得我希望文本区域所在的实际顶部。将paddingTop设置为该值似乎可以很好地对齐。