Есть <input type="text" />
Мне нужно установить вертикальное выравнивание введенного текста. Например, средний или верхний.
http://jsfiddle.net/eSPMr/
Как вертикально выровнять текст в типе ввода = "текст"?
Ответ 1
Используйте отступы для подделки, так как выравнивание по вертикали не работает с текстовыми вводами.
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>