让一个文字在背景图片水平居中的方法

举报
孙叫兽 发表于 2021/04/13 23:19:31 2021/04/13
【摘要】 最近工作中在做那个可视化大屏,图中用到了大量的装饰图片,下面看一下文字怎么在图片中水平居中。  这个方法比较好用,其他的方法嵌入太多可能不是特别好使,尤其嵌入到多个框架中。 html <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>测试文字在图片上展示</title> <styl...

最近工作中在做那个可视化大屏,图中用到了大量的装饰图片,下面看一下文字怎么在图片中水平居中。 

这个方法比较好用,其他的方法嵌入太多可能不是特别好使,尤其嵌入到多个框架中。

html


  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>测试文字在图片上展示</title>
  6. <style type="text/css">
  7. .imgGroup{
  8. width: 500px;
  9. height: 370px;
  10. position: relative;
  11. margin: auto;
  12. /* text-align: center; */
  13. }
  14. .text{
  15. position: absolute;
  16. top: 50%;
  17. left: 50%;
  18. transform: translate(-50%, -50%);
  19. color: red;
  20. }
  21. .imgGroup img{
  22. width: 100%;
  23. height: 100%;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div class="imgGroup">
  29. <img src="img/1.png" alt="图片"/>
  30. <div class="text">孙叫兽</div>
  31. </div>
  32. </body>
  33. </html>

 效果图:

 

文章来源: sunmenglei.blog.csdn.net,作者:孙叫兽,版权归原作者所有,如需转载,请联系作者。

原文链接:sunmenglei.blog.csdn.net/article/details/115647160

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。