如何将figcaption从图中垂直定位？

Question

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

我已经尝试了转换rotate和origin之类的内容，但似乎问题是它不适合父对象的新高度/宽度。

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

Answer 1

您添加position: relative top:和left:属性值figcaption类。

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

＆＃13;

＆＃13;

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 {
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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