Alignment of rotated text

Question

I'm facing a problem of rotating text vertically. I've already looked here and here, but still couldn't adjust my snippet to work properly.

i'm trying to achieve vertical text to be align at the center and equal heights for both divs.

<div class="wrapper">
  <div class="vertical">
    <span class="vertical-text">short title</span>
  </div>
  <div class="horizontal">
     long text
  </div>
</div>

and current css:

.wrapper {
  display: inline-table;
}
.vertical {
  display: table-cell;
}
.vertical-text {
  display: inline-block;
  transform: rotate(-90deg);
  white-space: nowrap;
}
.horizontal { display: table-cell; }

Here's the link to a Plunker.

Answer 1

You can add to .vertical css class this line:

vertical-align: middle;

it will align you text vertically.

---

So your class should be like this:

.vertical {
  display: table-cell;
  vertical-align: middle;
}