html图片文字下方,css图片下边怎么加字

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答疑栏目,欢迎学习!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值