How to Draw Vertical Text With CSS Cross-Browser

How can I draw vertical text with CSS cross-browser?

Updated this answer with recent information (from CSS Tricks). Kudos to Matt and Douglas for pointing out the filter implementation.

.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Old answer:

For FF 3.5 or Safari/Webkit 3.1, check out: -moz-transform (and -webkit-transform). IE has a Matrix filter(v5.5+), but I'm not certain how to use it. Opera has no transformation capabilities yet.

.rot-neg-90 {
  /* rotate -90 deg, not sure if a negative number is supported so I used 270 */
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
  /* IE support too convoluted for the time I've got on my hands... */
}

CrossBrowser Vertical CSS Text

You can achieve it via transform: rotate() CSS property, for example:

div {  width: 300px;  transform-origin: center top;  transform: rotate(270deg);}

<div>  <h1>First</h1>  <h1>Second</h1>  <h1>Third</h1></div>

Cross browser vertical centering for text inside a circle

.quantity-badge {
  display: block; /*Changed this*/
  width: 24px;
  height: 24px;
  line-height:24px; /*Added this*/
  padding:10px; /*Added this*/
  text-align: center;
  vertical-align: middle;
  color: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%; /*Added this*/
  background-color: #0896ea;
}

I hope this can begin to help you out. Here is a fork of the code you posted: http://codepen.io/anon/pen/EKNevV

Is there a way to just rotate text vertically? Without rotating the whole cell?

You should make a div what is outside the text, and rotate that the other way.

So: If

.VerticalText {  
    transform: rotate(-90deg); 
}

and the div outside is called for example .VerticalTextWrapper

.VerticalTextWrapper {
    transform: rotate(90deg);
}

Hope that helps!

Vertical Text with CSS

Specifically for IE, try this:

#myText {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

http://msdn.microsoft.com/en-us/library/ms532918(VS.85).aspx

I'm sorry, but I can't get to IE right now to test versions, but I'm pretty sure it is supported back to IE6.

The ultimate solution to cross-browser vertical centering?

Without an element containing the text, i doubt you will be able to position it dead center like you wish. Once you write proper markup (put the paragraph in a <p> where it belongs, for instance) it is quite possible though, with the following css;

p {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

Also make sure its container (body in your case) gets display: table; and 100% width/height

Demo at http://jsfiddle.net/sfaVg/3/

Also, a bonus alternative method (requires two containers) can be found at http://zoffix.com/new/absolute-center-random-width-height.html

A third solution, for when you know the dimensions of what you're centering: http://reisio.com/examples/deadcenter/

Vertical Text on a webpage

Modify the th like this:

<th>
    <div class="container">
        <div class="head">
            <div class="vert">Column 1</div>
        </div>
    </div>
</th>
<th>
    <div class="container">
        <div class="head">
            <div class="vert">Col 2</div>
        </div>
    </div>
</th>
<th>
    <div class="container">
        <div class="head">
            <div class="vert">Column Two</div>
        </div>
    </div>
</th>

And add the CSS provided in the Fiddle and you will get the desired result, I hope.

FIDDLE

javascript / jQuery / CSS - vertical text?

This answer provides a solution that works in IE, Firefox, Opera, and Webkit.