我想旋转文本,使其以 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);
}
最佳答案
fiddle :http://jsfiddle.net/w5K4j/32/
您希望 h3
上的 inline-block
使其框覆盖其长度:
h3 {
display: inline-block;
}
并在父级上保持 text-align: center
。
编辑:此外,您需要通过将文本向左偏移其宽度的一半来使文本居中:
$('h3').css('margin-left', -$('h3').width()/2)
关于jquery - 尝试将旋转文本置于 float div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18161690/