Question

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

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

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

<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/

您希望inline-block上的h3使其框显示其长度：

h3 {
    display: inline-block;
}

并在父母身上保留text-align: center。

编辑：此外，您需要通过将文本的左侧偏移量减去其宽度的一半来使文本居中：

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

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

2 个答案: