如何垂直对齐旋转的图像标题？答案

【问题标题】：How to vertically align a rotated image caption?如何垂直对齐旋转的图像标题？
【发布时间】：2020-07-12 10:27:09
【问题描述】：

我正在尝试对齐图像容器左下角的图像标题。

这是预期结果的图片。

这是我正在使用的 HTML/CSS：

.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>

我的代码有两个问题：

旋转后的文本不是从左下角开始。
向左应用：-40px 并不总是将文本与图像对齐（有时它会在图像顶部重叠）。

这是另一个说明问题的屏幕截图。

我希望我已经正确解释了自己，我一直在努力解决这个问题，所以我非常感谢您的意见和想法。谢谢！

【问题讨论】：

标签： html css caption

【解决方案1】：

只需考虑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>

【讨论】：