What I have so far: 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;
}
I need to center the text inside the grey div, this div's height is consistent, but the text is generated via ajax, for this reason I believe transform origin is not going to fix it. Would like a CSS solution, but welcome js as well.
Using display: table
, combined with display: table-cell
as well as vertical-align: middle
:
Living demo: 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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.