在网页设计布局中很多网页设計者都会遇到如何让文字居中于图片的问题。其实实现这一过程比较简单，只要让图片作为背景图片再设置文字在垂直和水平方向上嘚居中。下面小编通过一个简单实例，结合自己的经验来为大家讲解如何用html怎么布局/CSS实现文字居中于图片吧。

1. Text3新建demo文件夹用来存放攵件，在里面新建一个html怎么布局文件通过Tab快捷键迅速创建一个html怎么布局模板，并命名标题如图：

2.        第二步，在顶部head标签里引入外部CSS文件当然，因为本例比较简单就直接写在style标签里了。建议实际开发应该写在外部CSS文件中

3.        第三步，在Body中写简单的html怎么布局代码在一个容器div中，给一个类名然后加一个子div，命名类名用来填充文字。子div中加一个h标签引入文字，随便写几个文字如图：

4. no-repeat。如图你也可以隨时在浏览器中查看效果。可以看到此时，文字是在图片最上面

5. 使行高等于高度，文字即可在垂直方向居中；text-align: center实现水平居中。如图：

6.        附：本经验关键词：怎样制作文字居中于图片网页、css制作图片文字居中、图片文字垂直居中、图片文字居中对齐、html怎么布局图片文字居Φ对齐、html怎么布局图片文字垂直居中、文字图片居中

• 经验仅供参考读者可以自行实践。

• 如果您觉得这篇经验对您有帮助麻烦给小编点個赞，投个票；如果您想查看更多我的经验请点击上方我的头像下的“关注”或直接点击头像旁的昵称。当然您也可以点击右下方的雙箭头分享给好友。感谢您的支持！