CSS/HTML中如何实现竖排文本顶部对齐？

云原生阿岚

2026-6-23

解决方案

要实现垂直排列的日文文本在水平居中的同时从容器顶部开始对齐，核心是用现代CSS布局替代过时的align属性，结合writing-mode的排版特性调整对齐逻辑：

关键调整点

移除HTML中过时的align="center"属性，改用Flexbox或Grid布局精确控制对齐
由于writing-mode: vertical-lr改变了排版轴，普通vertical-align不再生效，需通过容器布局属性控制垂直对齐

完整代码示例

HTML

<div class="obi-container">
  <p>どんな時だってずっと二人で。どんな時だって側にいるから。<br> 過去はどこかにしまっておけ。ここからそう遠くないだろう。観たこともない景色。<br> 今夜のことは誰にも言わない。誰にも言わない。</p>
</div>

CSS

/* 容器：水平居中，垂直顶部对齐，占满视口高度方便预览 */
.obi-container {
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: flex-start; /* 垂直方向顶部对齐 */
  min-height: 100vh;
  margin: 0;
}

p {
  writing-mode: vertical-lr;
  text-orientation: upright;
  color: #fe87b3;
  font-family: "Helvetica";
  font-size: 18px;
}

适配实体腰封场景（侧边固定横幅）

如果要做类似书籍腰封的侧边固定效果，可调整容器样式：

.obi-container {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 60px;
  background-color: #000; /* 腰封背景 */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20px; /* 顶部留白 */
}

p {
  writing-mode: vertical-lr;
  text-orientation: upright;
  color: #fe87b3;
  font-family: "Helvetica";
  font-size: 18px;
  margin: 0;
}