Css 我想要从下到上垂直对齐的文本。如何实现它。？附加预期输出

我想要从下到上垂直对齐的文本。如何实现它。？附加预期输出

HTML

预期产量

---

您可以使用

文本方向

，然后将其旋转

180度

.class1{
背景：#1ac6d3；
宽度：40px；
高度：200px；
显示器：flex；
对齐项目：居中；
调整内容：中心
}
.2级{
文本取向：横向；
书写方式：垂直lr；
变换：旋转（180度）；
字体大小：粗体；
}

标题自下而上

有很多方法可以做到这一点

按职位划分：-

.class1{
背景：#1ac6d3；
位置：相对位置；
宽度：40px；
高度：100vh；
最小高度：400px；
}
.2级{
位置：绝对位置；
最高：50%；
左：50%；
写入方式：垂直rl；
文本取向：混合型；
变换：平移（-50%，-50%）旋转（180度）；
}

标题自下而上

试试这个：

.class2{
字体大小：14px；
字号：700；
颜色：#323232；
文本转换：大写；
-webkit变换：旋转（-90度）translateX（-200px）；
-ms变换：旋转（-90度）translateX（-200像素）；
变换：旋转（-90度）translateX（-200像素）；
-webkit变换原点：左上角；
-ms变换原点：左上角；
变换原点：左上角；
背景：#1ac6d3；
填充：8px；
}

标题自下而上

文本方向

在这里什么都不做。删除它，您将得到相同的结果（它对值

的侧向支持也非常差，只有Firefox支持此值）
<div class="class1">
  <div class="class2">Title from bottom to top</div>
</div>

.class1 {
background: #1ac6d3;
position: relative;
width: 40px;
height:200px;
}

.class2 {
position: absolute;
top: 35%;
left: 50%;
width: 200px;
}