如何将 figcaption 从图中垂直放置？答案

【问题标题】：How to position figcaption vertical right from figure?如何将 figcaption 从图中垂直放置？
【发布时间】：2017-05-03 17:56:08
【问题描述】：

我有一个带有 figcaption 的图。我想将 figcaption 放在图 img 旁边，如下图所示。

我已经尝试过转换rotate 和origin 之类的方法，但问题似乎在于它不适合父对象的新高度/宽度。

http://codepen.io/Caspert/pen/eWEvvL

【问题讨论】：

标签： html css

【解决方案1】：

您将 position: relative 与 top: 和 left: 属性值添加到您的 figcaption 类。

注意：如果您想要一致的结果，图像和标题必须始终具有相同的大小等。此外，没有任何地方可以调整屏幕大小导致块四处移动。您需要解决此问题以提高响应能力，但这是基本思想。

figure {
  margin-top: 100px;
  position: relative;
}

figcaption {
  position: relative;
  background: rgba(255,0,0,0.6);
     -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Chrome, Safari, Opera */
  transform: rotate(90deg);
   left: 280px;
   top: -102px;

/*   transform-origin: 100% 25px; */
}

figcaption p {
}

<div class="container">

  <div class="row">
    <figure class="col-md-6">
      <img src="http://placehold.it/540x360" alt="Gear">
      <figcaption class="dash-holder vertical">
        <p>Gear</p>
      </figcaption>
      <!-- End figcaption.vertical -->
    </figure>
    <!-- End figure.col-md-6 -->
  </div>


</div>

http://codepen.io/illdapt/pen/KmvWEx

【讨论】：

是否还有一个修复方法，以便我可以从底部对齐文本，正如您在上面的设计中看到的那样？
我调整了底部的codepen链接，基本上是在figcaption p元素中添加了margin-top来移动到想要的位置。

【解决方案2】：

您可以使用 Flexbox 进行定位，使用 transform-origin 控制旋转元素。您还可以使用边距DEMO 从图形底部开始修改figcaption 的位置。

figure {
  margin-top: 100px;
  position: relative;
  align-items: flex-end;
  display: flex;
}
figcaption {
  background: rgba(255, 0, 0, 0.6);
  transform: rotate(90deg);
  transform-origin: top right;
}
figcaption p {
  margin: 0;
}

<figure class="col-md-6">
  <img src="http://placehold.it/540x360" alt="Gear">
  <figcaption class="dash-holder vertical">
    <p>Gear</p>
  </figcaption>
</figure>

【讨论】：