在前端页面开发中，input输入框是常用的表单元素，当我们需要让input的高度比默认尺寸更高，同时要求输入和显示的文字位于输入框底部时，直接修改height属性往往无法达到预期效果，因为浏览器默认会让input内的文字垂直居中。下面介绍几种可行的实现方案。
方案一：使用padding-top调整
这是最简单直接的方法，通过给input设置较大的height，同时添加较大的padding-top，让文字内容被挤到输入框底部。需要注意的是，input的默认盒模型是content-box，设置padding会增加元素的总高度，因此需要计算好height和padding的数值。
/* 设置input高度为60px，上下padding各20px，实际内容高度20px，文字会靠下 */
input.bottom-text {
height: 60px;
padding: 20px 10px 0 10px;
box-sizing: border-box; /* 使用border-box让padding和border计入总高度 */
font-size: 16px;
}
对应的HTML代码如下：
<input type="text" class="bottom-text" placeholder="输入内容" />
方案二：设置vertical-align属性
input是行内替换元素，可以通过设置vertical-align属性调整其内部文字的垂直对齐方式。不过这种方式需要配合line-height使用，让行高等于input的高度，再设置vertical-align为bottom。
input.bottom-text {
height: 60px;
line-height: 60px; /* 行高等于input高度 */
vertical-align: bottom; /* 文字垂直底部对齐 */
font-size: 16px;
padding: 0 10px;
box-sizing: border-box;
}
方案三：使用flex布局
如果input的父元素是flex容器，可以通过flex布局的相关属性让input内部的文字对齐到底部。这种方式兼容性稍弱，但在现代浏览器中表现稳定。
/* 父容器样式 */
.input-wrap {
display: flex;
align-items: flex-end; /* 子元素底部对齐 */
height: 60px;
}
input.bottom-text {
height: 100%;
width: 200px;
font-size: 16px;
padding: 0 10px;
box-sizing: border-box;
}
对应的HTML结构：
<div class="input-wrap">
<input type="text" class="bottom-text" placeholder="输入内容" />
</div>
方案对比
下面是三种方案的适用场景和优缺点对比：
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| padding-top调整 | 实现简单，兼容性好 | 需要计算padding和height的数值 | 所有需要兼容旧浏览器的场景 |
| vertical-align属性 | 逻辑直观，不需要额外容器 | 需要配合line-height使用，对多行文本支持不好 | 单行文本输入的input场景 |
| flex布局 | 布局灵活，支持更多对齐需求 | 旧浏览器兼容性较差 | 现代浏览器环境，复杂布局场景 |
注意事项
- 使用
box-sizing: border-box可以避免padding和border导致元素总尺寸超出预期，建议调整input样式时默认添加该属性。 - 如果input设置了固定高度，需要注意placeholder文字的对齐问题，部分浏览器下placeholder的默认对齐方式可能需要单独调整。
- 以上方案中，input的height属性如果设置为auto，文字对齐效果可能会失效，因此建议给input设置明确的高度值。
inputvertical_alignbottomCSS修改时间：2026-07-24 02:51:22