让一个文字在背景图片水平居中的方法
生活随笔
收集整理的這篇文章主要介紹了
让一个文字在背景图片水平居中的方法
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
最近工作中在做那個可視化大屏，圖中用到了大量的裝飾圖片，下面看一下文字怎么在圖片中水平居中。?
這個方法比較好用，其他的方法嵌入太多可能不是特別好使，尤其嵌入到多個框架中。
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>?效果圖：
?
總結
以上是生活随笔為你收集整理的让一个文字在背景图片水平居中的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何科学高效的学习Web前端开发？
- 下一篇： 事关每个程序员的职业规划与履历