css如何让图片居中显示文字
1、创建一个父层div,定位为position:relative;
2、创建img和span标签;
3、img宽高为父级元素宽高;
4、span定位为position:absolute,并设置left和top为50��再设置margin为宽高的一半实现居中。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style="position:relative;width:100px; height:100px; border:1px solid #ccc; text-align:center;"> <img src="./css3.webp" width="100" height="100"> <span style="width:48px; height:12px; line-height:12px; position:absolute; top:50 left:50 margin-left:-24px; margin-top:-6px;"> 居中文字 </span> </div> </body> </html>
主要思想:用定位方式定位水平垂直居中。比较简单的实现方式,仅提供参考。
更多CSS相关技术文章,请访问CSS3答疑栏目进行学习!
以上就是css如何让图片居中显示文字的详细内容,更多请关注易知道|edz.cc其它相关文章!