Horizontally align rotated text

Asked Sep 01 '16 at 18:09

Active Sep 02 '16 at 08:33

Viewed 78 times

I would like to horizontally center align some texts that have been rotated 90 and 270 degrees (following the advice here) with their neighboring div (whose height can change in my application). Some of the usual tricks don't seem to work because the elements are created and processed horizontally, and then rotated.

Here is a fiddle demonstrating the problem. Thanks in advance.

HTML:

<div class="col-xs-1">
  <div class="vertical_left">
    <h3>Text to align</h3>  <!-- horizontally center this to the following div -->
  </div>
</div>

<div class="col-xs-10">
</div>

CSS:

.vertical_left{
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform:rotate(270deg);
    transform: rotate(270deg);
    white-space:nowrap;
    display:block;
}

edited May 23 '17 at 12:32

Community

asked Sep 01 '16 at 18:09

Animik

You'll need to position it...that's what's usually required. – Paulie_D Sep 01 '16 at 18:11
means you want the text to set at center vertically. – yash Sep 01 '16 at 18:18
I'm not sure what you mean by "position it". The big div in the center is actually dynamically resizable in my application, so I cannot hardcode the height. – Animik Sep 02 '16 at 08:32

Horizontally align rotated text

0 Answers0