6

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?

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;
}
Eric Geurts
  • 732
  • 6
  • 13

2 Answers2

8

Well Buddy Add text-align:center of the <div> and then instead of rotating text at 90 deg! Rotate the <div> at 90 deg!

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

Muhammad Talha Akbar
  • 9,952
  • 6
  • 38
  • 62
  • the problem is that it's not flexible anymore. And they should be floated to the sides like this: http://jsfiddle.net/SVkPU/2/ I only can't get the text centered in the div. – Eric Geurts Dec 24 '12 at 13:58
0

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.

Eric Geurts
  • 732
  • 6
  • 13