尝试将旋转的文本置于浮动div中

Question

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

我正在尝试一种解决方案， 它不会让我在父div上改变任何东西（位置，浮动等），也不会在旋转的div（margin，top）上手动处理像素 。 有没有办法（ 最佳实践 ）来实现它？

我不介意浏览器兼容性 ，只是在没有修改结构或修复长度的情况下寻找最好的方法

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

我没有得到您的问题，但我认为您只想将您的标题h3与中心对齐。

一种方法是使用css属性line-height

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

你可以根据你的要求改变它。 FIDDLE： http ： //jsfiddle.net/w5K4j/31/

Answer 2

小提琴： http ： //jsfiddle.net/w5K4j/32/

你想让h3上的inline-block使它的盒子覆盖它的长度：

h3 {
    display: inline-block;
}

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

编辑：此外，你需要通过给它一个负的左偏移宽度的一半使文本居中：

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