如何将figcaption放在图的右侧？

Question

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

Answer 1

父母的

display: flex; align-tiems: center。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者让他们inline-block并使用vertical-align

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果我已正确理解您的问题，您可以通过以下方式实现您所效果：

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

工作示例：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;