d439bace002f36dfdd2382f7069d5983.png

css图片下边怎么加字

比较简单的做法就是,将他们放置在一个盒子内,让文字跟图片居中,只需要利用css样式的text-align属性即可,并且各个浏览器都会正常显示,代码如下:

6107.jpg

这里是居中的文字

.box{width:300px; text-align:center; font-size:14px;}

.box img {width:100%;}

(相关课程推荐:css视频教程)

f6b7d450228793fb5c0d6341e50b9d89.png

还有一种方式,可以使用绝对定位position: absolute;让文字覆盖在图片上。

.box{

position: relative;

}

.box p{

font-size: 14px;

position: absolute;

bottom: 2px;

width: 100%;

text-align: center;

}

react3.jpg

居中文字

7d23726b8ac5855e627555b1e97af5dc.png

本文来自css3答疑栏目,欢迎学习!

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐