CODEWITHSUNDEEP
htmlcsscss-transformstext-rotation
ChernikovP
ChernikovP

Reputation: 471

Alignment of rotated text

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.

Upvotes: 0

Views: 69

Answers (1)

Danibix
Danibix

Reputation: 235

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;
}

Upvotes: 1

Related Questions