Geek Answers Handbook

How to align rotated text in the middle of a div

I would like to vertically align the rotated text in the middle of 100% of the height of the div, as shown below.

Therefore, whenever the screen size changes, the text remains in the middle of the div.

Does anyone have a solution for this?

enter image description here

http://jsfiddle.net/SVkPU/1/

.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; }
+6
source share
2 answers

This worked for me: http://davidwalsh.name/css-vertical-text

also tried using flexboxes. But since they are (still) not fully supported by all browsers, especially the (mobile) safaris on which it should run, I use a more supported approach.

0
source

Well Buddy Add text-align:center from the <div> , and then instead of turning the text 90 degrees! Rotate the <div> 90 degrees!

http://jsfiddle.net/KSAqR/1/

+7
source

More articles:


All Articles