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.

Danibix · Accepted Answer · 2016-06-07 21:14:16Z

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

Collectives™ on Stack Overflow

Alignment of rotated text

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related