Вертикальный текст

Question

Как сделать эту часть верстки, чтобы текст был вертикально. Без переносов в одну строку, по центру. Я учусь верстать, и не могу понять как эту часть сделать

Answer 1

Например можно transform применить.

#blok{
    width: 50px;
    height: 150px;
;
}
#blok p{
    transform: rotate(90deg);
}

<div id="blok">
    <p>Переворачиваемый текст</p>
</div>

Answer 2

У стиля writing-mode есть такой параметр. Прочитайте о нём, там их несколько

.block {
  display: inline-block;
  background: gray;
}

.vertical-text {
  writing-mode: sideways-lr;
}

<div class="block">
  <div class="vertical-text">Вертикальный текст</div>
</div>

Так же есть вариант реализовать это при помощи transform: rotate, но придётся поизвращаться над конечным результатом

.block {
  display: inline-block;
  width: 30px;
  height: 200px;
  background: gray;
  position: relative;
}

.vertical-text {
  transform-origin: left top;
  transform: rotate(-90deg) translateY(-50%);
  position: absolute;
  left: 50%;
  bottom: 0;
  white-space: nowrap;
}

<div class="block">
  <div class="vertical-text">Вертикальный текст</div>
</div>

Answer 3

Всех благодарю за помощь. Помогло свойство transform: rotate(-90deg) translateX(-50px); Позиционировал с помощью position: absolute; left: -170px; top: 388px; Не понятно почему свойство left с текстом сработало с отрицательным числом, а иконка с положительным left: 40px; Позиционировал от одного родителя. И еще по поводу кнопки, в свойствах нет обводки кнопки, получается у самого тега по умолчанию стоит это свойство?

БЛОГ НА HUSL

Вертикальный текст

Ответы (3 шт):