Почему мое текстовое значение не центрируется при удалении полос прокрутки?

Question

Я пытаюсь создать текстовую область, у которой нет полосы прокрутки и текст центрирован.

Я исправил проблему с полосой прокрутки, установив стиль переполнения на автоматический или скрытый.Однако это приводит к тому, что текст перестает центрироваться.

Ниже показаны мои атрибуты стиля для всех текстовых областей:

textarea
{
    overflow:auto;
    width: 200px;
    height: 60px; 
    text-align:center;
    vertical-align:middle;   
}

Ниже показан мой код для одной из моих текстовых областей:

<textarea ID="textarea1" style="position:absolute; left:600px;">
     Bridge Crane
</textarea>

Вот как сейчас выглядят текстовые зоны:

Answer 1

Это выглядит не по центру, потому что у вас есть куча пробелов внутри открывающих и закрывающих тегов. Содержание на самом деле центрируется , если учесть все значение. Просто удалите пробелы.

textarea {
    overflow: auto;
    width: 200px;
    height: 60px;
    text-align: center;
    vertical-align: middle;
}

<textarea ID="textarea1">Bridge Crane</textarea>

Answer 2

Похоже, что вы хотите vertical-align: middle;, потому что у вас есть это в CSS, но плохая новость в том, что мы не можем сделать это только с <textarea></textarea>.Мы должны использовать div-content-editable.

div {
    overflow: auto;
    width: 200px;
    height: 60px;
    border:1px solid black; /* a border just for styling */
    text-align:center; /* text is center horizontally */
    display: table-cell; /* yes, so we can use vertical-align: middle */
    vertical-align: middle; 
}

<div contenteditable="true">
    Row Row Row your boat
</div>