36

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

4

7 回答 7

26

使用填充来伪造它，因为垂直对齐不适用于文本输入。

jsFiddle 示例

CSS

.date-input {     
    width: 145px;
    padding-top: 80px;
}​
于 2012-09-10T16:20:59.917 回答
13

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

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

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

于 2012-09-10T16:34:10.717 回答
10 
input[type=text]
{
   height: 15px; 
   line-height: 15px;
}

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

于 2012-09-10T16:31:03.410 回答
5

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

于 2018-07-03T19:05:32.650 回答
2

将其放在 div 标签中似乎是强制执行以下操作的唯一方法：

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

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

于 2013-11-05T13:32:40.013 回答
2

我在寻找解决自己问题的方法时发现了这个问题。前面的答案依赖于 padding 使文本出现在输入的顶部或底部，或者使用 height 和 line-height 的组合将文本与垂直中间对齐。

这是使用 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>
于 2017-09-22T20:18:41.047 回答
-1

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

调整填充大小，直到它适合你想要的大小。这就是黑客

于 2019-01-05T00:01:46.550 回答