如何在图像的中心插入文本答案

【问题标题】：how to insert text in the center of an image如何在图像的中心插入文本
【发布时间】：2014-04-15 05:30:24
【问题描述】：

你能告诉我在图片中间写一段文字吗？我应该在不使用 div 标签的情况下做到这一点。我可以通过使用 h:panelGroup 或 primefaces 标签来成功吗？我使用标签创建了我的图像？

最好的问候阿尔珀

【问题讨论】：

h:panelGroup 呈现为div（或span）。如果您使用div 或h:panelGroup，有什么区别？
使用图片作为h:panelGroup的背景，在里面添加文本，使用style属性居中文本（或者使用styleClass并将你的样式放在css中）。

【解决方案1】：

试试这个

<h:panelGroup style="display:block; text-align:center; background-image: url(./images/yourImage.png); background-repeat: no-repeat; background-position: center;">
    <h:outputText value="TEST" />
</h:panelGroup>

注意 1：在背景图像 URL 中设置正确的路径，如果需要添加图像大小，如果需要添加垂直对齐。

注意2：您可以在css中移动样式并在h:panelGroup中使用styleClass属性。

【讨论】：