html - 如何将 figcaption 放在图形的右侧？

Question

问题很简单。关于html和css。如何将 html figcaption 元素放置在 img 的右侧(居中)？

Answer 1

显示: flex ； align-tiems: center 在 parent 身上。

figure {
  display: flex;
  align-items: center;
}

<figure>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <figcaption>caption</figcaption>
</figure>

或者让它们成为 inline-block 并使用 vertical-align

img,figcaption {
  display: inline-block;
  vertical-align: middle;
}

<figure>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <figcaption>caption</figcaption>
</figure>