Как вертикально выравнивать текст-заполнитель в textarea?

Ответ 1

Один из вариантов - использовать line-height:

.textbox1 { 
    width: 440px;
    height:30px;
    line-height:30px;
}

.textbox1 { 
    width: 440px;
    height:30px;
    line-height:30px;
}

<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>

Ответ 2

Это работает для последних Firefox, IE/Edge, Chrome в чистом CSS:

textarea { 
    width: 440px;
    height:600px; /* Note this is the same height as the placeholders line-height */
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    line-height:600px;
}
::-webkit-input-placeholder { /* Webkit */
    line-height:600px;
}
:-ms-input-placeholder { /* IE */
    line-height:600px;
}

Смотрите fiddle. Ключ должен установить height текстового поля к тому же line-height в качестве заполнителя.

Печально vertical-align: middle;, похоже, пока не поддерживается.

Ответ 3

Лучше всего использовать padding, поскольку line height не будет работать над несколькими строками.

Кроме того, при вычислении вашего заполнения обязательно учитывайте размер линии/размер шрифта.

Ответ 4

Я думаю, это не совсем то, что вы хотите, но попробуйте посмотреть..

Чтобы центрировать его по вертикали, я умножаю высоту элемента на 7.5% и делаю его высотой строки.

.textbox1{
width: 440px;
height:100px;
line-height: calc(100 * 7.5%);
}
.textbox1:focus{
  line-height: 14px;
}

Проверьте это здесь. чистый CSS jsFiddle

Примечание. Функция CSS3 calc() работает только в современных браузерах. Вы можете вручную изменить/рассчитать высоту линии, если вы хотите, чтобы она работала в старых браузерах.

или вам действительно нужно использовать jQuery

Я помог jQuery здесь jQuery jsFiddle

Ответ 5

Используйте свойство line-height чтобы заполнитель располагался вертикально по центру.