如何修复textarea内文本垂直居中、无法占满全部输入空间的问题

问题原因 #

出现这个现象是两个样式共同导致的：

• 包裹textarea的父容器是Bootstrap的flex布局行容器，父元素上设置的align-self: center属性作用到了textarea上，让文本域本身在flex容器里垂直居中排布
• 原样式只给textarea设置了左内边距，没有设置控制内容垂直对齐的属性，浏览器默认的文本域内边距被覆盖后，输入内容就会卡在垂直居中的位置，无法从顶部开始排布。

修复步骤 #

直接修改#input-area2的样式，新增3个核心属性即可：

• 补全内边距：替换原有的padding-left为统一的padding设置，给上下方向也留出合理的边距，避免内容贴边
• 强制内容顶部对齐：添加vertical-align: top，让输入光标和文本内容从文本域顶部开始排列
• 重置flex对齐属性：添加align-self: auto，覆盖父元素继承来的居中对齐规则

修复后的完整CSS代码如下：

.get-in-touch-info #input-area2 {
    background-color: #efefef;
    color: black;
    font-size: 1.3em;
    border: 2px solid #b0b0b0;
    width: 75%;
    height: 9rem;
    /* 替换原有padding-left，补全上下内边距，数值可按设计需求调整 */
    padding: 0.5em 0.3em;
    vertical-align: top;
    align-self: auto;
    /* 可选属性：允许用户垂直拖拽调整文本域高度，不需要可删除 */
    resize: vertical;
    margin-bottom: 1em;
}

避坑提示：不要给多行textarea设置和自身高度相等的line-height值，这是单行输入框的常用写法，套用到多行文本域上会直接导致只能输入单行内容、文本垂直居中的问题，后续扩展样式时需要注意。

修改完成后刷新页面，textarea的输入光标会默认定位在文本域左上角，输入的长文本会从上到下自动换行排布，完全占满文本域的可用输入区域。

内容的提问来源于stack exchange，提问作者Amr El-Nagdy