如何实现文字竖直排列并居中对齐？

Question

**如何在前端实现文字竖直排列并居中对齐？** 在前端开发中，如何实现文字竖直排列并居中对齐是一个常见布局需求，尤其在设计中文竖排文本时（如书法展示、传统文档等）。常见的实现方式包括使用 CSS 的 `writing-mode`、`text-align`、`display: flex` 等属性。然而，开发者常遇到文字排列方向不正确、垂直居中失效、容器高度不适应文字长度等问题。特别是在不同浏览器中，`writing-mode` 的行为可能存在差异，影响布局效果。本文将介绍几种主流方法，分析其适用场景与常见问题，帮助开发者高效实现竖直排列且居中的文本布局。

Answer 1

1. 初识竖排文字布局

在前端开发中，实现文字竖直排列并居中对齐通常用于展示中文竖排文本，例如书法展示、传统文档排版等。实现这一效果的关键在于理解 CSS 的书写模式（writing-mode）以及对齐方式。

默认情况下，网页文本是水平排列的，即从左到右（LTR）或从右到左（RTL）。要实现竖直排列，我们需要使用 writing-mode: vertical-rl 或 vertical-lr。

• writing-mode: vertical-rl;：从右向左竖排
• writing-mode: vertical-lr;：从左向右竖排

2. 使用 writing-mode 实现竖排文字

使用 writing-mode 是实现竖排文字的基础方式。但需要注意的是，该属性会影响文本的排列方向，同时也会影响文本的对齐方式。

例如：

.vertical-text {
  writing-mode: vertical-rl;
  text-align: center;
}

上面的代码会使文字竖排，并尝试居中显示，但由于 writing-mode 改变了文本的主轴方向，此时的 text-align 实际上是垂直方向的对齐。

3. 使用 Flexbox 实现居中对齐

为了实现文字在容器中竖直排列并居中对齐，可以结合 Flexbox 布局。

示例代码如下：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  height: 200px;
  width: 100px;
  border: 1px solid #ccc;
}

.vertical-text {
  text-align: center;
}

此方法适用于需要在固定容器中精确控制文字位置的场景。

4. 使用 Grid 布局实现高级控制

CSS Grid 布局也可以用于实现竖排文字并居中，尤其适合需要多列或复杂对齐的场景。

示例代码如下：

.grid-container {
  display: grid;
  place-items: center;
  writing-mode: vertical-rl;
  height: 200px;
  width: 100px;
  border: 1px solid #000;
}

使用 place-items: center 可以同时实现水平和垂直居中。

5. 常见问题与浏览器兼容性分析

尽管 writing-mode 被广泛支持，但在不同浏览器中仍存在细微差异。例如：

浏览器	支持 writing-mode	备注
Chrome	✅	支持 vertical-rl 和 vertical-lr
Firefox	✅	支持 vertical-rl 和 vertical-lr
Safari	✅	部分版本可能需要 -webkit 前缀
Edge	✅	支持良好

开发者需要注意使用时的兼容性问题，并进行跨浏览器测试。

6. 使用伪元素实现逐字竖排

对于需要每个字符单独竖排的情况，可以使用 JavaScript 或伪元素 ::after / ::before 实现。

例如，使用 JS 将字符串拆分为单个字符：

const text = "竖排文字";
const container = document.getElementById("vertical-text");
container.innerHTML = [...text].map(char => `${char}`).join("");

再配合 CSS 设置 display: block，即可实现逐字竖排。

7. 响应式设计与自适应高度

在响应式设计中，竖排文字容器的高度可能需要根据内容动态调整。可以通过设置 height: auto 和 white-space: nowrap 来避免文字换行。

示例：

.responsive-container {
  writing-mode: vertical-rl;
  white-space: nowrap;
  height: auto;
  padding: 10px;
}

这样可以确保容器高度根据文字数量自动调整。

8. 进阶技巧：结合 transform 实现旋转文字

在某些设计中，开发者可能希望文字竖排后仍保持水平方向显示。此时可以使用 transform: rotate() 配合布局。

示例：

.rotated-text {
  transform: rotate(90deg);
  transform-origin: left top;
  display: inline-block;
}

这种方法适合用于标签、图表坐标轴等场景。

9. 总结与推荐方案

实现竖排文字并居中对齐的方法多样，开发者应根据具体需求选择合适的方案：

• 简单竖排：使用 writing-mode + text-align
• 居中对齐：使用 Flexbox 或 Grid 布局
• 逐字竖排：使用 JS 或伪元素
• 响应式容器：设置 height: auto 和 white-space: nowrap