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

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

聖光之護

发布： 2025-09-15 22:22:31

原创

184人浏览过

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

本文旨在解决 textarea 元素中文字垂直居中显示的问题，并提供优化 textarea 样式的实用技巧。通过分析问题根源，我们将探讨如何利用 CSS 属性调整文本的垂直对齐方式，使其占据 textarea 的全部空间，并提供相应的代码示例，帮助开发者创建更美观、用户体验更佳的表单。

textarea 文本垂直居中问题分析与解决

在 HTML 表单开发中，textarea 元素用于创建多行文本输入框。有时，开发者会遇到 textarea 中的文本默认垂直居中的情况，导致文本无法从顶部开始显示，影响用户体验。出现这种情况的原因通常是浏览器默认样式或者某些 CSS 属性的影响。

以下是一些解决此问题的有效方法：

1. 重置默认样式

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

不同浏览器对 textarea 元素可能有不同的默认样式。为了确保跨浏览器的一致性，建议首先重置一些可能影响垂直对齐的样式。

.get-in-touch-info #input-area2 {
  /* 重置可能影响垂直对齐的样式 */
  margin: 0;
  padding: 0;
}

登录后复制

2. 使用 vertical-align 属性

vertical-align 属性通常用于控制行内元素或表格单元格内容的垂直对齐方式。虽然 textarea 不是行内元素，但在某些情况下，设置 vertical-align: top; 可以影响其内部文本的垂直对齐。

.get-in-touch-info #input-area2 {
  vertical-align: top; /* 将文本对齐到顶部 */
}

登录后复制

3. 利用 line-height 属性

小文AI论文

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

查看详情

line-height 属性定义了行高。如果 line-height 的值大于字体大小，可能会导致文本在 textarea 中垂直居中。可以尝试将 line-height 设置为与字体大小相近的值，或者直接设置为 normal。

.get-in-touch-info #input-area2 {
  line-height: normal; /* 使用默认行高 */
}

登录后复制

4. 使用 padding-top 属性

通过设置 padding-top 属性，可以手动调整文本与 textarea 顶部的距离。这是一种简单直接的方法，可以精确控制文本的垂直位置。

.get-in-touch-info #input-area2 {
  padding-top: 0.3em; /* 调整文本与顶部的距离 */
}

登录后复制

5. 结合 overflow 属性

如果 textarea 的高度固定，并且文本内容超过了其高度，可能会出现滚动条。为了更好地处理这种情况，可以结合 overflow 属性使用。overflow-y: auto; 可以使 textarea 在内容超出高度时显示垂直滚动条。

.get-in-touch-info #input-area2 {
  overflow-y: auto; /* 内容超出高度时显示垂直滚动条 */
}

登录后复制

完整示例代码

以下是一个完整的示例代码，展示了如何解决 textarea 文本垂直居中问题，并优化其样式：

<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>

登录后复制

.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;

  /* 解决文本垂直居中问题 */
  margin: 0;
  padding: 0.3em; /* 调整文本与顶部的距离 */
  vertical-align: top;
  line-height: normal;
  overflow-y: auto; /* 内容超出高度时显示垂直滚动条 */
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

登录后复制