0

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

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

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

小提琴：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);
}
4

2 回答 2

1

我不明白您的问题，但我认为您只想将标题对齐h3以居中对齐。

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

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

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

于 2013-08-10T13:14:38.700 回答
1

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

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

h3 {
    display: inline-block;
}

并继续text-align: center关注父母。

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

$('h3').css('margin-left', -$('h3').width()/2)
于 2013-08-10T13:18:04.073 回答