左侧侧边栏旋转h2/h3文本底部对齐问题求助

嘿，我太懂你这个痛点了——旋转文本后的对齐简直是CSS里的小坑，固定定位确实容易搞出脱离文档流、响应式崩掉这类副作用。别慌，换个思路咱们就能完美搞定！

问题根源分析 #

单独旋转<h2>和<h3>会让每个元素的排版坐标系独立，普通对齐方式自然失效；固定定位脱离正常布局流，和侧边栏其他元素的关联断了，不出问题才怪。咱们要做的是把需要对齐的文本打包成一个整体，统一旋转，再控制内部对齐。

具体实现方案 #

给你一套可直接复用的代码，完美适配你的需求：主标题单行在左、日期单行在右，整体精准对齐到侧边栏文本中心。

HTML结构

<aside class="sidebar">
  <div class="title-wrapper">
    <h2 class="main-title">我的主标题</h2>
    <h3 class="date">2024-05-20</h3>
  </div>
</aside>

CSS样式

/* 侧边栏基础布局 */
.sidebar {
  width: 70px; /* 根据你的实际需求调整宽度 */
  height: 100vh;
  background-color: #f5f5f5;
  /* 让标题容器垂直+水平居中（旋转后对应侧边栏的文本中心） */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 核心：标题组容器 */
.title-wrapper {
  /* 让h2和h3在同一行对齐 */
  display: flex;
  align-items: center;
  gap: 15px; /* 主标题和日期的间距，按需调整 */
  /* 统一旋转整个容器，避免单独旋转的对齐混乱 */
  transform: rotate(-90deg);
  /* 关键！以容器中心为旋转基点，确保旋转后位置不偏移 */
  transform-origin: center center;
  /* 强制文本单行 */
  white-space: nowrap;
}

/* 确保单个标题也保持单行 */
.main-title, .date {
  margin: 0;
  white-space: nowrap;
}

为什么这个方案有效？ #

1. 整体旋转替代单独旋转：把主标题和日期放在同一个容器里旋转，它们的相对对齐关系完全保留，不会因为各自旋转而错位。
2. flex布局控制内部对齐：用align-items: center让两个标题垂直居中，gap控制间距，轻松实现“左标题右日期”的单行布局。
3. transform-origin控旋转基点：设置为中心旋转，旋转后的整个标题组会精准对齐到侧边栏的中心位置，完美匹配你的需求。
4. 避免固定定位的副作用：整个布局基于正常文档流，响应式场景下也能和侧边栏保持联动，不会出现滚动错位的问题。

如果需要调整主标题和日期的上下位置（比如主标题在底部），只需要修改transform的旋转角度（比如改成rotate(90deg)），再微调一下容器的对齐方式就行。

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