如何在 div 中间对齐旋转的文本

Posted 2023-03-05

【中文标题】如何在 div 中间对齐旋转的文本

【英文标题】：How to align rotated text in the middle of a div

【发布时间】：2012-12-10 20:01:27

【问题描述】：

我想在 100% 高度的 div 中间垂直对齐旋转的文本，如下图所示。

因此，每当屏幕大小发生变化时，文本都会停留在 div 的中间。

谁有解决办法？

http://jsfiddle.net/SVkPU/1/

.rotate-270 
    -o-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform:rotate(270deg);


.left 
    float:left;
    background:#000;
    color:#fff;
    text-align:center;
    height:50px;



.right 
    float:right;
    background:#000;
    color:#fff;

【参考方案1】：

伙计，添加<div> 中的text-align:center，然后将文本旋转90 度！将<div> 旋转 90 度！

http://jsfiddle.net/KSAqR/1/

【讨论】：

问题是它不再灵活了。它们应该像这样浮动到两侧：jsfiddle.net/SVkPU/2 我只是无法让文本在 div 中居中。

【参考方案2】：

这对我有用： http://davidwalsh.name/css-vertical-text

还尝试使用弹性框。但是由于它们（仍然）没有得到所有浏览器的完全支持，尤其是（移动）safari - 它必须在其上工作，所以我采用了更受支持的方法。