如何将figcaption放在图的右侧?

时间:2017-04-10 23:28:41

标签: html css

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

2 个答案:

答案 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;
&#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;

答案 1 :(得分:0)

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

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