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

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

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

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

html


      <!DOCTYPE html>
      <html>
     	<head>
     		<meta charset="utf-8" />
     		<title>测试文字在图片上展示</title>
     		<style type="text/css">
     			.imgGroup{
      width: 500px;
      height: 370px;
      position: relative;
      margin: auto;
      /* text-align: center; */
      			}
     			.text{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: red;
      			}
     			.imgGroup img{
      width: 100%;
      height: 100%;
      			}
     		</style>
     	</head>
     	<body>
     		<div class="imgGroup">
     			<img src="img/1.png" alt="图片"/>
     			<div class="text">孙叫兽</div>
     		</div>
     	</body>
      </html>
  
 

 效果图:

 

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

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

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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