I would like to vertical align rotated text in the middle of a 100% height div, like the image below.
So whenever the screen size changes the text stays in the middle of the div.
Anyone has a solution for this?
.rotate-270 {
-o-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
transform:rotate(270deg);
}
.left {
float:left;
background:#000;
color:#fff;
text-align:center;
height:50px;
}
.right {
float:right;
background:#000;
color:#fff;
}
Well Buddy Add text-align:center
of the <div>
and then instead of rotating text at 90 deg! Rotate the <div>
at 90 deg!