如何在不使用JS的情况下实现垂直文本在h1块中的两端对齐

嘿，这个垂直文本两端对齐的问题我之前也碰到过，确实有点坑，但纯CSS完全能搞定，不用碰JavaScript～ 结合你给出的现有代码，给你两个靠谱的解决方案：

方案1：利用 writing-mode + 文本对齐属性（适合连续文本） #

这个方案不用拆分文本，直接通过CSS属性组合实现，兼容性也不错：

首先，给你的.vertical_header补充以下CSS（把你之前没写完的position属性补全，比如position: relative）：

section > header {
  float: left;
  width: 10%;
  height: 100%; /* 关键：让header填满section的高度，给垂直文本提供拉伸空间 */
}

.vertical_header {
  position: relative; /* 补全你之前的position属性 */
  writing-mode: vertical-rl; /* 设置垂直排版，从右到左；需要从左到右就用vertical-lr */
  text-align: justify; /* 开启两端对齐 */
  text-align-last: justify; /* 确保最后一行也能对齐 */
  height: 100%; /* 让标题容器填满父header的高度 */
}

/* 核心技巧：单行垂直文本需要伪元素触发justify生效 */
.vertical_header::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 0;
}

为什么这么做？ #

默认情况下，单行文本的text-align: justify不会生效，我们通过伪元素模拟出“额外的一行”，让浏览器触发两端对齐的逻辑，同时确保容器有明确的高度，这样文本才能在垂直方向上填满整个容器。

方案2：Flexbox 布局（适合可拆分的文本） #

如果上面的方法不符合预期，用Flexbox会更直观，不过需要把文本拆成单独的元素（比如每个字符包在<span>里）：

HTML调整： #

<h1 class="vertical_header">
  <span>垂</span><span>直</span><span>标</span><span>题</span>
</h1>

CSS调整： #

section > header {
  float: left;
  width: 10%;
  height: 100%;
}

.vertical_header {
  position: relative;
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column; /* 垂直排列flex项 */
  justify-content: space-between; /* 垂直方向两端对齐 */
  height: 100%;
}

这个方法的优势是逻辑清晰，不用处理伪元素，只要文本能拆分成独立的flex项，就能均匀分布在容器的垂直空间里。

注意事项 #

• 不管用哪个方案，必须给容器设置明确的高度（比如height: 100%继承父元素高度），否则两端对齐没有可参考的空间。
• writing-mode兼容性很好，现代浏览器（包括IE10+）都支持，不用担心兼容问题。

内容的提问来源于stack exchange，提问作者onizukaek