让文本在高 input 框中底部对齐的技巧
网页开发中，常常需要创建高度较大的输入框 (input)，并让其中的文本位于底部，而非默认的垂直居中。本文介绍几种实现此效果的方法。
问题：文本垂直居中
一个高度为 60px 的 input 框，其文本默认垂直居中显示。我们需要将其调整到底部。
解决方案：利用 CSS
无需使用 padding，我们可以通过巧妙的 CSS 布局来实现。方法是隐藏 input 的默认边框，然后用一个带有边框的容器包裹 input，并将其定位到容器底部。
步骤：
-
隐藏 input 默认边框: 使用
border: none;去除 input 的默认边框。 -
创建带边框的容器: 创建一个
div容器，设置其高度和边框样式。 -
将 input 定位到容器底部: 使用
position: absolute;和bottom: 0;将 input 绝对定位到容器底部。
代码示例：
Document
通过以上方法，即使 input 高度增加，文本也会始终保持在底部。 box-sizing: border-box; 确保了 input 的高度计算包含了边框和内边距，避免了高度计算上的偏差。
