当前位置：主页 > 查看内容

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

发布时间：2021-06-18 00:00| 有 位朋友查看

简介：最近工作中在做那个可视化大屏图中用到了大量的装饰图片下面看一下文字怎么在图片中水平居中。? 这个方法比较好用其他的方法嵌入太多可能不是特别好使尤其嵌入到多个框架中。 html !DOCTYPE htmlhtmlheadmeta charsetutf-8 /title测试文字在图片上展示/title……

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

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

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>

?效果图：

?

；原文链接：https://blog.csdn.net/weixin_41937552/article/details/115647160
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：八、DIV+CSS 下一篇：快速串讲校招高频面试题——排序算法和复杂度

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐