jquery - 尝试将旋转文本置于 float div 中

Question

我想旋转文本，使其以 div 为中心。

我正在尝试一种解决方案，它不会让我更改父 div 上的任何内容(位置、 float 等)，也不会手动处理旋转 div(边距、顶部)上的像素。有什么方法(最佳实践)可以实现吗？

我不介意浏览器兼容性，只是寻找最好的方式来做到这一点而不修改结构或固定长度

fiddle :http://jsfiddle.net/w5K4j/29/

<div id="parent">
    <div id="unknown"></div>
    <div id="child">
        <h3>Click this overflowing text that I'd like to V/H center when rotated</h3>
    </div>
</div>

样式表:

#parent {
    height:300px;
    width:70px;
    float:left;
    border: 1px solid;
}

#unknown {
    float:right;
    height:50px;
    width:20px;
    background-color: yellow
}

#child {
    float:right;
    height:100px;
    width:70px;
    clear:right;
    background-color: orange;
    /*text-align: center;*/
}

h3 {
    /*vertical-align: middle;*/
    white-space:nowrap;
    border: 1px solid;
}

.rotated {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}

Answer 1

fiddle :http://jsfiddle.net/w5K4j/32/

您希望 h3 上的 inline-block 使其框覆盖其长度:

h3 {
    display: inline-block;
}

并在父级上保持 text-align: center。

编辑:此外，您需要通过将文本向左偏移其宽度的一半来使文本居中:

$('h3').css('margin-left', -$('h3').width()/2)