gpt4 book ai didi

image - 将 figcaption 垂直居中放置在图像旁边?

转载 作者:行者123 更新时间:2023-12-01 02:03:10 25 4
gpt4 key购买 nike

我在 figure 中有一个图像和一个标题标签。我想知道如何获得 figcaption位于 img 旁边并垂直居中,如所附图像。

enter image description here

这是一个 jsfiddle我设置。

谢谢!

最佳答案

在这里,只需将 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;
}

关于image - 将 figcaption 垂直居中放置在图像旁边?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34503852/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com