Question

<input type="text" />我需要设置输入文本的垂直对齐方式。例如中间或顶部。 http://jsfiddle.net/eSPMr/

Answer 1

使用填充伪造它，因为vertical-align对文本输入不起作用。

<强> CSS

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

Answer 2

另一种方法是使用line-height： http://jsfiddle.net/DjT37/

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

当您需要特定高度时，这往往更加一致，因为您不需要根据字体大小和所需高度等计算填充。

Answer 3

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

这是设置垂直 - 中间位置的正确方法。

Answer 4

把它放在div标签中似乎是FORCE的唯一方法：

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

可能像span这样的其他标签就像div一样。

Answer 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>

Answer 6

如果您不想使用CSS强制使用<textarea>元素，则文本会自动在文本框顶部对齐。

Answer 7

如果垂直对齐不起作用，请使用填充。 padding-top: 10px; 它将文本移到底部或 padding-bottom: 10px; 将文本框中的文本移到顶部

调整填充大小，直到适合您想要的大小。那就是骇客

如何在input type =“text”中垂直对齐文本？

7 个答案: