如何实现卡片侧边旋转文本的正确对齐？

要实现旋转文本垂直居中对齐在卡片左侧的效果，你需要调整CSS的变换原点和定位属性，以下是修改后的代码：

修改后的CSS #

.group {
  display: flex;
  gap: 0.5rem;
}

.card {
  aspect-ratio: 0.675;
  width: 10rem;
  height: auto;
  border: 1px solid grey;
  border-radius: 6px;
  margin: 0.5rem;
  padding: 0.5rem;
}

.inner-div {
  display: flex;
  height: 100%;
}

.relative {
  position: relative;
  height: 100%; /* 让容器和卡片同高，确保垂直居中基准正确 */
  margin-right: 0.5rem; /* 和红色区块保持间距 */
}

.rotated-text {
  transform: rotate(-90deg) translate(-100%, 0); /* 旋转后向左偏移自身宽度，贴合左侧 */
  transform-origin: top right; /* 以文本右上角为旋转原点 */
  white-space: nowrap;
  position: absolute;
  top: 50%; /* 垂直居中 */
  margin: 0;
}

.red-card {
  flex-grow: 1;
  background: red;
  border-radius: 6px;
}

修改后的HTML #

<div class='group'>
  <div class="card">
    <div class="inner-div">
      <div class="relative">
        <p class='rotated-text'>Text</p>
      </div>
      <div class='red-card'>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="inner-div">
      <div class="relative">
        <p class='rotated-text'>Another piece of text</p>
      </div>
      <div class='red-card'>
      </div>
    </div>
  </div>
</div>

关键调整说明 #

• 给.relative添加height: 100%，让它继承卡片的高度，为旋转文本的垂直居中提供正确基准
• 调整.rotated-text的transform：先旋转-90度，再向左平移自身宽度，确保文本旋转后贴合容器左侧
• 设置transform-origin: top right，让文本以自身右上角为旋转点，避免旋转后位置偏移
• 用top: 50%让旋转后的文本垂直居中对齐

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