Как выровнять по вертикали заголовок повернутого изображения? - PullRequest
Новая
       42

Как выровнять по вертикали заголовок повернутого изображения?

1 голос
/ 12 июля 2020

Я пытаюсь выровнять заголовок изображения в нижней левой части контейнера изображения.

Вот изображение желаемого результата.

image 

.elementor-image figure {
    position: relative;
}

.elementor-image figure figcaption {
    position: absolute;
    bottom: 0;
    left: -40px;
    transform: rotate(-90deg);
}
<div class="elementor-image">
<figure class="wp-caption">
<img src="https://picsum.photos/200/300">                                           
<figcaption class="widget-image-caption wp-caption-text">The Lorem <span></span></figcaption>
</figure>
</div>

В моем коде есть две проблемы:

  1. Повернутый текст не начинается с нижнего левого угла.
  2. Применение left: -40px не всегда выравнивает текст с изображением (иногда он накладывается поверх изображения).

Вот еще один снимок экрана, иллюстрирующий проблему.

введите описание изображения здесь

Надеюсь, я правильно объяснил, я бился головой об этом, поэтому я был бы очень признателен за ваш вклад и мысли. Спасибо!

1 Ответ

4 голосов
/ 12 июля 2020

Просто рассмотрите transform-origin:bottom left;

.elementor-image figure {
  position: relative;
}

.elementor-image figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
  transform-origin:bottom left;
}

img {
 display:block; /* to avoid white space and have a perfect alignment */
}
<div class="elementor-image">
  <figure class="wp-caption">
    <img src="https://picsum.photos/200/300">
    <figcaption class="widget-image-caption wp-caption-text">The Lorem <span></span></figcaption>
  </figure>
</div>
...