CODEWITHSUNDEEP
htmlcss
Jack
Jack

Reputation: 67

Trouble with Rotated Text

After practicing some of the CSS i have been learning i have encountered a problem and despite trying numerous things i cant seem to get what i want. I transformed the text to fit in the grey divs vertically, but i cant seem to get it so the words are all displayed on one line. How do i acheive this? I think once i get that it should be easy to position them centrally.

http://jsfiddle.net/#&togetherjs=DGHlFmn0Hg

Upvotes: 0

Views: 36

Answers (2)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13526

Good approach to vertical text that is placed in one line and takes as much vertical space as needed is described in this article: http://kizu.ru/en/fun/rotated-text/

The 1st example there seems to be exactly your case (compact table headers).

Upvotes: 1

King King
King King

Reputation: 63317

You should center the text first using transform and absolute positioning. Then just apply the rotate transform (around the center point by default):

#headline .buttons {
  height:100%;
  width:50px;
  background:#a5a5a5;
  float:right;
  margin-right:3px;
  color:#fff;
  /* add this */
  position:relative;
}

#headline .buttons p {  
  margin:0;    
  text-align:center;    
  position:absolute;
  width:260px;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}

Jsfiddle demo.

Note that the width of the <p> element will just fill the width of the containing button which is just small (hence the text wrapping). So you have to set the width explicitly as large as possible (it does not really matter) so that the text will span on a single line.

Upvotes: 1

Related Questions