如何使INPUT文本元素中的文本垂直上对齐？

Question

I have a tall INPUT (type=text) element which is sized at 100%. 我有一个很高的INPUT（类型=文本）元素，其大小为100％。 The containing element has a specific height (which is dynamic). 包含元素具有特定的高度（动态的）。

What I want is to be able to put the text at the top of the INPUT element. 我想要的是能够将文本放在INPUT元素的顶部。 I've seen a few answers use padding to vertically centre it, but I could not get that to place the text at the top of the element. 我已经看到一些答案使用填充将其垂直居中，但我无法将其放置在元素顶部。 I'm not able to set the height of the element. 我无法设置元素的高度。

Example HTML (or JSFiddle ): HTML示例（或JSFiddle ）：

<body>
<div class="outer">
<input type="text" value ="textcontent"></input>
</div>
</body>

and CSS: 和CSS：

body { background-color:gray;}

.outer {
    height:480px;
    background-color:pink;
    margin-top:100px;
}

input {
    height:100%;
    background-color:lightgray;
    padding-top:0px;
    line-height:100px;
}

Can this be done without setting the height of the element? 可以在不设置元素高度的情况下完成此操作吗？ Browsers I need to support: Chrome, FF, IE9 & IE11. 我需要支持的浏览器：Chrome，FF，IE9和IE11。

Thanks Dave 谢谢戴夫

Answer 1

If you want to have only input element and achieve this, then set padding-bottom and not height. 如果您只想要输入元素并实现此目的，请设置padding-bottom而不是height。

Once you set height, by default the text will be shown in the middle of the element. 设置高度后，默认情况下，文本将显示在元素的中间。

input {
  padding-bottom: 462px;
  background-color:lightgreen;   
}

http://jsfiddle.net/yf5f82vx/1/ http://jsfiddle.net/yf5f82vx/1/

Answer 2

I would recommend you to use the textarea insted of the text input. 我建议您使用在文本输入中插入的textarea。

That way the text will start from the top and will wrap the text if its have more charactors that the width. 这样，文本将从顶部开始，如果其字符多于宽度，则将自动换行。

check the below ex 检查下面的前

Fiddle example 小提琴的例子

'<body>
 <div class="outer">
 <textarea >textcontent</textarea>
 </div>
 </body>'

'body { background-color:gray;}

.outer {
height:480px;
background-color:pink;
margin-top:100px;
overflow:hidden;
}

textarea {
background-color: lightgray;
border: 1px solid #ccc;
box-sizing: border-box;
height: 100%;
line-height: 50px;
max-height: 100%;
padding-top: 0;
resize: none;
}'

如何使INPUT文本元素中的文本垂直上对齐？

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-12-02 12:39:50

解决方案2
0 2014-12-02 13:18:05

如何使INPUT文本元素中的文本垂直上对齐？

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-12-02 12:39:50

解决方案2 0 2014-12-02 13:18:05

解决方案1
1 已采纳 2014-12-02 12:39:50

解决方案2
0 2014-12-02 13:18:05