Question

我有一个p：commandLink with

.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>

没关系，我有一个成像按钮。

但我想＆＃34;好的＆＃34;要在按钮图像中间采取的文本

你有什么建议，到目前为止我已经尝试了一些但没有回应。

我认为如果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;

将文本居中在成像的commandLink中

1 个答案: