css - 在居中图像的一侧有一个图形标题

Question

默认情况下，标题位于图像下方。

<figure>
<img src="some_img.jpg"> 
<figcaption>Some Image Caption</figcaption>
</figure>

如果您需要侧面的标题，您可以使用 dispaly: inline for figcaption。

然后您可以使用 text-align: center 将两者居中。

但是如何才能只将图像框对齐到中心，同时将标题保持在它的侧面呢？

像这样:mock up

Answer 1

一种选择是绝对定位 figcaption。

figure {
  border: 1px solid #663399;
  background: #bada55;
  text-align: center;
  position: relative;
}
figure img {
  display: inline-block;
  vertical-align: middle;
}
figcaption {
  position: absolute;
  /* values below can be amended as required */
  top: 50%;
  left: 50%;
  transform: translate(100%, -50%);
}

<figure>
  <img src="http://lorempixel.com/output/nightlife-q-c-200-200-6.jpg" />
  <figcaption>Some Image Caption</figcaption>
</figure>