css在图片下添加文字居中显示

今天我们要学习使用CSS来在图片下方添加文字并实现居中显示的效果。

.photo-caption {
    position: relative;
 /* 相对定位 */}
.photo-caption img {
    display: block;
 /* 块级元素，避免与文字排版冲突 */}
.photo-caption .caption {
    position: absolute;
     /* 绝对定位 */bottom: 0;
     /* 底部对齐 */width: 100%;
     /* 宽度占满父元素 */text-align: center;
     /* 文字居中 */background-color: rgba(0, 0, 0, 0.8);
     /* 设置背景色并设置透明度 */color: #fff;
     /* 设置文字颜色为白色 */font-size: 1.2rem;
     /* 设置文字大小 */padding: 0.5rem 0;
 /* 设置内边距 */}
    

以上是我们需要的CSS代码，接下来我们来解释一下它们的作用：

首先我们需要给包含图片和文字的元素设置相对定位，这里我们给这个元素添加了一个类名“photo-caption”，使用相对定位的原因是为了让“caption”元素能够根据“photo-caption”元素进行定位。

然后我们需要给图片设置块级元素，这样可以避免图片和文字在排版上的冲突。

接着，我们给文字元素设置绝对定位，并将它固定在元素的底部，使用“bottom: 0; ”来实现，然后设置元素的宽度为100%，这样文字元素的宽度就会占满整个图片和文字元素的宽度，即“photo-caption”元素的宽度。然后设置文字居中显示，并设置背景色，并使用rgba()函数设置透明度，为了使文字更加醒目，我们设置文字颜色为白色，并设置合适的文字大小和内边距。

最后我们只需要给图片和文字所处的元素添加这个类名“photo-caption”即可完成效果。

这就是使用CSS来在图片下添加文字并居中显示的方法，试试吧，你也可以拥有一个美美哒的图文效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！