Как я могу вертикально центрировать элемент input / textarea, где несколько строк текста все еще переносятся ниже?

Question

Я использую Ionic 3, поэтому рассматриваемый элемент является внутренним элементом стиля, который я создаю (Изначально у меня был внутренний элемент, но, поскольку нет абсолютно никакого способа обернуть элемент ввода одной строкой, я вынужден использовать textarea).Мне нужно иметь элемент textarea (мне все равно, сколько строк), где пользователь может вводить несколько строк текста.НО мне также нужно, чтобы начало этого текста было в точном центре элемента textarea (чтобы выровняться с другими элементами, составляющими общую вещь.

входные данные против текстовой области

Высоты в этих значениях выражены в процентах, поэтому попытка высот линий, выравнивания по вертикали и т. П. Оказалась неудачной.Так как это веб-приложение и приложение для мобильных устройств, я также потерпел неудачу в 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 выглядит хорошо.