我目前拥有的: http://jsfiddle.net/2Zrx7/2/
.events{
height:100px;
position: relative;
}
.tt_username{
position: absolute;
top:0px;
height: 100%;
width: 30px;
background: #ccc;
text-align: center;
}
.tt_username p{
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
background: #ff0000;
font-size: 16px;
}
我需要将灰色 div 中的文本居中,这个 div 的高度是一致的,但文本是通过 ajax 生成的,因此我相信 transform origin 不会修复它。想要 CSS 解决方案,但也欢迎 js。
最佳答案
使用display: table
,结合display: table-cell
以及vertical-align: middle
:
现场演示:http://jsfiddle.net/2Zrx7/3/
.events{
height:100px;
position: relative;
display: table; /*added*/
}
.tt_username{
/* position: absolute;*/
top:0px;
height: 100%;
width: 30px;
background: #ccc;
text-align: center;
display:table-cell; /*added*/
vertical-align:middle; /*added*/
}
.tt_username p{
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
background: #ff0000;
font-size: 16px;
}
关于javascript - 在父 div 中居中旋转的段落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18847550/