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

【问题标题】：How to align rotated text in the middle of a div如何在 div 中间对齐旋转的文本
【发布时间】：2012-12-10 20:01:27
【问题描述】：

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

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

谁有解决办法？

.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;
}

【问题讨论】：

标签： html css alignment vertical-alignment text-alignment

【解决方案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 - 它必须在其上工作，所以我采用了更受支持的方法。

【讨论】：