css - 将图像命令中的文本居中链接

Question

我有一个 p: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 和 height 值以包含尺寸。

width: 150px;
height: 50px;