最近作業中在做那個可視化大屏，圖中用到了大量的裝飾圖片，下面看一下文字怎么在圖片中水平居中，
這個方法比較好用，其他的方法嵌入太多可能不是特別好使，尤其嵌入到多個框架中，
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://www.uj5u.com/qianduan/275493.html
標籤：其他
下一篇：八、DIV+CSS