css - 如何垂直居中 input/textarea 元素，其中多行文本仍环绕在下方？

Question

我正在使用 Ionic 3，所以有问题的元素是我正在设置样式的 an 的内部(最初我有 an 的内部，但由于绝对没有办法包装单行输入元素，我不得不使用 textarea ). 我需要能够有一个 textarea 元素(我不在乎有多少行)，用户可以在其中键入多行文本。但我还需要该文本的开头位于 textarea 元素的确切中心(以与构成整体的其他元素对齐。

input vs textarea

这些上的高度是百分比值，所以尝试行高、垂直对齐和类似的方法都没有成功。我试过 display: flex 和 centering also display: table-cell 和 vertically aligning 并且两者都没有骰子。由于它是 Web 和移动应用程序，因此由于平台不同，我在 padding-top 方面也没有成功。

我想让文本区域内文本的开头从文本区域的中心开始，以便它与上图中的其他内容对齐，但也能够像文本一样换行变得比文本区域的宽度长。

Answer 1

我想我终于弄明白了，它似乎在网络和移动设备上都适用。 这是代码...

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 来获取文本区域高度的正确 getBoundingClientRect 值。然后我把它切成两半以获得真正的中间部分。我还需要文本区域的实际行高并将其减半并减去以获得我想要文本区域所在位置的实际顶部。将 paddingTop 设置为该值似乎排列得很好。