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!
This worked for me: http://davidwalsh.name/css-vertical-text
also tried to use flexboxes. But as they are (still) not fully supported by all browsers especially (mobile) safari - on which it must work I go with a more supported approach.
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.