将文本置于图像命令的中心Link

Question

我有 ap:commandLink

.button{
    background-image: url(http://www.lefinnois.net/aqua/aqua1.jpg);
    display:inline-block;
    width:150;
    height:50;   
}
<p:commandLink update="media" value="Ok"
    action="#{productView.save}" styleClass="button">
</p:commandLink>

可以，我有一个图像按钮。

但我希望“确定”文本出现在按钮图像的中间，

您的建议是什么，我已经尝试过一些方法，但到目前为止没有任何反应。

我认为如果jsf是一个网络编程平台，那一定是可能的。

已解决

我必须向外部对象添加填充才能找到内部对象。

最后的代码：

.button{
        background-image: url(http://www.lefinnois.net/aqua/aqua1.jpg);
        display:inline-block;
        text-align: center;
        padding-top:10px;//you must set it according to the height of image
        width:150;
        height:50;   
    }

Answer 1

将 CSS text-align 属性设置为 center 并将 line-height 设置为与元素高度相同的高度：

text-align: center;
line-height: 50px;

不要忘记修复您的宽度和高度值以包含尺寸。

width: 150px;
height: 50px;