Как вертикально выровнять текст в типе ввода = "текст"?

Есть <input type="text" /> Мне нужно установить вертикальное выравнивание введенного текста. Например, средний или верхний. http://jsfiddle.net/eSPMr/

Ответ 1

Используйте отступы для подделки, так как выравнивание по вертикали не работает с текстовыми вводами.

Пример jsFiddle

CSS

.date-input {     
    width: 145px;
    padding-top: 80px;
}

Ответ 2

Альтернативой является использование line-height: http://jsfiddle.net/DjT37/

.bigbox{
    height:40px;
    line-height:40px;
    padding:0 5px;
}

Это имеет тенденцию быть более последовательным, если вам нужна определенная высота, так как вам не нужно вычислять заполнение на основе размера шрифта и желаемой высоты и т.д.

Ответ 3

input[type=text]
{
   height: 15px; 
   line-height: 15px;
}

это правильный способ установить вертикально-среднее положение.

Ответ 4

Поместить его в тег div, кажется, единственный способ FORCE, который:

<div style="vertical-align: middle"><div><input ... /></div></div>

Могут быть другие теги, такие как span works, как div do.

Ответ 5

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

Вот альтернативное решение сделать текст в середине, используя div и позиционирование. Проверьте jsfiddle.

<style type="text/css">
    div {
        display: inline-block;
        height: 300px;
        position: relative;
        width: 500px;
    }

    input {
        height: 100%;
        position: absolute;
        text-align: center; /* Optional */
        width: 100%;
    }
</style>

<div>
    <input type="text" value="Hello world!" />
</div>