网页开发中，常常需要创建高度较大的输入框 (input)，并让其中的文本位于底部，而非默认的垂直居中。本文介绍几种实现此效果的方法。
一个高度为 60px 的 input 框，其文本默认垂直居中显示。我们需要将其调整到底部。
无需使用 padding，我们可以通过巧妙的 CSS 布局来实现。方法是隐藏 input 的默认边框，然后用一个带有边框的容器包裹 input，并将其定位到容器底部。
步骤：
隐藏 input 默认边框: 使用 border: none; 去除 input 的默认边框。
创建带边框的容器: 创建一个 div 容器，设置其高度和边框样式。
将 input 定位到容器底部: 使用 position: absolute; 和 bottom: 0; 将 input 绝对定位到容器底部。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
height: 60px;
border: 1px solid #ccc;
position: relative; /* 关键：使绝对定位的子元素相对于此容器定位 */
}
input {
height: 100%;
border: none;
position: absolute;
bottom: 0;
width: 100%;
box-sizing: border-box; /* 确保内边距和边框包含在元素的总宽度和高度内 */
}
</style>
</head>
<body>
<div class="container">
<input type="text" placeholder="请输入文本">
</div>
</body>
</html>通过以上方法，即使 input 高度增加，文本也会始终保持在底部。 box-sizing: border-box; 确保了 input 的高度计算包含了边框和内边距，避免了高度计算上的偏差。
以上就是如何让input的高度增加同时保持文字在底部？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
732
