解决textarea文本垂直居中问题：CSS样式优化教程-html教程-PHP中文网

解决textarea文本垂直居中问题：CSS样式优化教程

碧海醫心

发布： 2025-09-15 22:16:01

原创

636人浏览过

解决textarea文本垂直居中问题：css样式优化教程

本文旨在解决textarea文本在垂直方向上居中显示，无法充分利用全部空间的问题。通过分析CSS样式中可能导致该问题的属性，并提供相应的解决方案，帮助开发者优化textarea的显示效果，使其能够正常显示多行文本并充分利用可用空间。

在网页开发中，<textarea>元素用于创建多行文本输入框。然而，有时会遇到文本在textarea中垂直居中显示，而不是从顶部开始填充整个区域的问题。这通常是由于CSS样式设置不当引起的。本文将详细介绍如何解决这个问题，确保textarea中的文本能够正确显示。

问题分析

textarea文本垂直居中的问题通常与以下CSS属性有关：

line-height: 如果line-height属性的值大于字体大小，可能会导致文本在行内垂直居中。
vertical-align: 虽然vertical-align主要用于行内元素，但在某些情况下也可能影响textarea中文本的垂直对齐。
display: 某些display属性值（例如flex或grid）可能会影响textarea内部文本的布局。
padding: 不合理的padding值也可能导致视觉上的垂直居中效果。

解决方案

要解决textarea文本垂直居中的问题，可以尝试以下方法：

立即学习“前端免费学习笔记（深入）”；

重置line-height: 将line-height属性设置为normal或一个较小的值，例如1或1.2。
设置vertical-align: 将vertical-align属性设置为top，强制文本从顶部开始对齐。

小文AI论文
轻松解决论文写作难题，AI论文助您一键完成，仅需一杯咖啡时间，即可轻松问鼎学术高峰！

69

查看详情
确保没有影响布局的display属性: 检查父元素或textarea本身是否设置了display: flex或display: grid，并根据需要调整布局。
调整padding: 仔细检查padding-top和padding-bottom的值，确保它们不会导致文本看起来垂直居中。通常，设置较小的padding-top值可以使文本更靠近顶部。
使用overflow-y: auto;: 当文本内容超过textarea的高度时，添加滚动条。

示例代码

以下是一个示例代码，展示了如何通过CSS解决textarea文本垂直居中的问题：

.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: 0.3em;
  margin-bottom: 1em;

  /* 解决垂直居中问题 */
  line-height: normal; /* 或者设置一个较小的值，例如 1.2 */
  vertical-align: top;
  overflow-y: auto; /* 添加滚动条，以便显示超出高度的内容 */
}

登录后复制

HTML结构:

<section class="row get-in-touch-row">
  <div
    class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 text-center align-self-center get-in-touch-info"
  >
    <h2>get in touch</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
      quisquam, temporibus suscipit totam soluta tenetur beatae ea non eum!
      Quisquam!
    </p>
    <input
      class="input-area1"
      type="text"
      placeholder="Your Name"
      required
    />
    <input class="input-area1" type="text" placeholder="Gender" required />
    <textarea
      name=""
      id="input-area2"
      cols="10"
      rows="10"
      placeholder="Message"
    ></textarea>
    <button>SEND MESSAGE</button>
  </div>
</section>

登录后复制