css如何让图片居中显示文字

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其它相关文章!

推荐阅读