Позиция figcaption вертикально по центру и рядом с изображением?

Question

У меня есть изображение и подпись в теге figure. Мне было интересно, как я могу получить figcaption, расположенный рядом с img и вертикально центрированным, как и прикрепленное изображение.

Вот jsfiddle я настраивал.

Спасибо!

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