将figcaption垂直居中并靠近图像？

【问题标题】：Position figcaption vertically centered and next to image?将figcaption垂直居中并靠近图像？
【发布时间】：2016-04-02 21:54:13
【问题描述】：

我在figure 标签中有一张图片和一个标题。我想知道如何让figcaption 位于img 旁边并垂直居中，就像所附图片一样。

这是我设置的jsfiddle。

谢谢！

【问题讨论】：

标签： image figure caption

【解决方案1】：

给你，只需将 css 替换为以下内容：

html { font-family: 'Helvetica-Neue', Arial, Helvetica; font-size: 1em; line-height: 1.4; letter-spacing: 1px; color:white; }
figure { float:left; padding:20px; display:block; background:#ffa2df; position:relative; }
.width { width:50%; }
.height { height:15em; }
img { width:auto; height:100%; float:left;}
figcaption { background:#5800ff; height:100%; display:flex; justify-content: center;
flex-direction: column;
text-align: center; 
float:left; 
}

【讨论】：

谢谢，但还不够！图像的宽度需要设置为“自动”。无论如何这仍然可以工作？
是的，我刚刚修改了答案。