This question already has answers here:
CSS Text orientation : vertically oriented to the right
                                
                                    (2个答案)
                                
                        
                                上个月关闭。
            
                    
我想要垂直对齐的文本从下到上。如何实现呢?附加预期。

的HTML

<div class="class1">
  <div class="class2">Title from bottom to top</div>
</div>


的CSS

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

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


预期输出

css - 我想要垂直对齐的文本从下到上。如何实现呢?附加预期的信息[重复项]-LMLPHP

最佳答案

您可以使用text-orientation然后将其旋转180deg



.class1 {
  background: #1ac6d3;
  width: 40px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center
}

.class2 {
  text-orientation: sideways;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  font-weight: bold;
}

<div class="class1">
  <div class="class2">Title from bottom to top</div>
</div>

关于css - 我想要垂直对齐的文本从下到上。如何实现呢?附加预期的信息[重复项],我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58760332/

10-11 13:41
查看更多