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

Question

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

Answer 1

display: flex; align-tiems: center 在父母身上。

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>

Answer 2

如果我正确理解你的问题，你可以通过使用以下组合来达到你想要的效果：

• position: absolute;
• top: 0;
• right: 0;
• writing-mode: vertical-rl;
• text-align: center;

工作示例：

figure {
position: relative;
width: 334px;
height: 180px;
background-color: rgb(127, 127, 127);
}

figcaption {
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 180px;
line-height: 24px;
font-size: 13px;
font-weight: bold;
text-align: center;
color: rgb(255, 255, 255);
text-transform: uppercase;
writing-mode: vertical-rl;
}

<figure>
<img src="http://placekitten.com/310/180" />
<figcaption>I am just a little cat</figcaption>
</figure>