html - 如何将标题与图像对齐？

Question

我想询问如何将标题与图像对齐，我的文本很长。可能吗？

<figure>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=330%C3%97180&w=330&h=180">
<figcaption>Adjusting to school is a noteworthy move in a youthful grown-up's life. For some, the move incorporates moving out of the family home surprisingly, making new companions, and confronting expanded academic demands.
</figcaption>
</figure>

CSS

figure {
display: inline-block;
margin: 20px;
}

figure img {
vertical-align: top;
}

figure figcaption {
text-align: center;
}

上面的代码导致了这个；

I COULDN'T UPLOAD IT BECAUSE IT SAYS I NEED 10 REPS TO POST IMAGES, I'M VERY VERY SORRY

Answer 1

用图像的宽度组成一个div即可。然后使用该图像作为背景图像并将内容对齐在 div 的中间。

示例如下:

.div{
display: flex;
height: 200px;
width: 100%;
background-image: url("paper.gif");
}

.caption{
margin: auto;
}