CSS旋转的垂直对齐问题答案

【问题标题】：Vertical alignment issues with CSS rotateCSS旋转的垂直对齐问题
【发布时间】：2016-10-20 06:55:18
【问题描述】：

我在 CSS 中遇到垂直对齐问题。我想从下到上显示内容。

我的主要目标：

内容宽度基于父高度；
内容与父级底部对齐；
内容逆时针旋转；

我在 SO 上看到了这个链接：Vertical Alignment 和其他链接。很遗憾，我找不到答案。

我制作了一个示例小提琴来说明我的问题：vertical alignment fiddle。我的结果是：

元素宽度基于父宽度；
内容旋转时有间隙；

.container {
  position: absolute;
  width: 100%;
  height: 92%;
}
.side-content {
  position: relative;
  float: left;
  vertical-align: top;
  border: 2px solid rgba(255, 0, 0, 1.0);
  width: 20%;
  height: 100%;
  box-sizing: border-box;
}
.main-content {
  position: relative;
  float: left;
  vertical-align: top;
  border: 2px solid rgba(255, 0, 255, 1.0);
  width: 80%;
  height: 100%;
  box-sizing: border-box;
}
.text-content {
  border: 2px solid rgba(255, 0, 0, 1.0);
  bottom: 0;
  width: 100%;
  position: absolute;
  float: left;
  font-size: 10px;
  color: rgba(255, 102, 0, 1.0);
  transform-origin: left top 0;
  transform: rotate(-90deg);
}

<section class="container">
  <div class="side-content">
    <span class="text-content">Vertical Alignment</span>
  </div>
  <div class="main-content">
  </div>
</section>

【问题讨论】：

标签： html css css-transforms

【解决方案1】：

试试这个，调整transform-origin 的值，并添加translateY(100%) 和rotate(-90deg)。

.text-content {
  ...
  transform-origin: left bottom;
  transform: rotate(-90deg) translateY(100%);
}

.container {
  position: absolute;
  width: 100%;
  height: 92%;
}
.side-content {
  position: relative;
  float: left;
  vertical-align: top;
  border: 2px solid rgba(255, 0, 0, 1.0);
  width: 20%;
  height: 100%;
  box-sizing: border-box;
}
.main-content {
  position: relative;
  float: left;
  vertical-align: top;
  border: 2px solid rgba(255, 0, 255, 1.0);
  width: 80%;
  height: 100%;
  box-sizing: border-box;
}
.text-content {
  border: 2px solid rgba(255, 0, 0, 1.0);
  bottom: 0;
  width: 100%;
  position: absolute;
  float: left;
  font-size: 10px;
  color: rgba(255, 102, 0, 1.0);
  transform-origin: left bottom;
  transform: rotate(-90deg) translateY(100%);
}

<section class="container">
  <div class="side-content">
    <span class="text-content">Vertical Alignment</span>
  </div>
  <div class="main-content">
  </div>
</section>

【讨论】：

【解决方案2】：

尝试将width 更改为auto 并将position 更改为fixed。

.text-content {
    ...
  width: auto;
  position:fixed;
    ...
}

【讨论】：