図の右側にfigcaptionを配置する方法は？

Question

質問は簡単です。 htmlとcssについてimgに右側の（中央に）htmlのfigcaption要素を配置する方法は？親の上の

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

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