问题很简单。关于html和css。如何将html figcaption元素放置在img的右侧(居中)?
答案 0 :(得分:2)
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>
&#13;
或者让他们inline-block
并使用vertical-align
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;
答案 1 :(得分:0)
如果我已正确理解您的问题,您可以通过以下方式实现您所效果:
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;
}
&#13;
<figure>
<img src="http://placekitten.com/310/180" />
<figcaption>I am just a little cat</figcaption>
</figure>
&#13;