Как выровнять вертикальный текст внутри блока?

Question

[pepvvell]

Делаю кнопку для открытия меню. Есть текст, повернутый на 90 градусов.

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

И есть блок кнопки, внутри которой надо выровнять текст по вертикали.

<div class="button">
  <span class="text"> menu </span>
</div>

Подскажите пожалуйста, как мне это сделать.
Вариант с подгонкой отступов не подходит, line-height = height тоже.

Comments

[Rustam Bainazarov]

Поворачивая элемент через rotate вы не поворачиваете его в действительности (высота не меняется с шириной местом и т. п.), поэтому нужно это учитывать.

[pepvvell]

Рустам Байназаров, да, это я понимаю. Наверное придется считать ширину текста, вычитать её из высоты кнопки и делать отступ сверху в половину полученного значения.

Answer 1

[Rustam Bainazarov]

Update. Описанное ниже решается с помощью CSS и writing-mode: vertical-lr

~ ~ ~

Если делать автоматически, то нужно использовать JS, ибо transform не меняет местами width и height:



Можно ставить min-height, что, в сочетании с display: flex у родителя таких блоков, позволит очень просто и без лишнего JS сделать подстройку всех элементов под высоту самого высокого в строке из них:



Если делать только на CSS, то нужно задать высоту блока:

Comments

[pepvvell]

Спасибо большое за ответ!

[Rustam Bainazarov]

pepvvell, не за что!