css - Centering the text in an imaged commandLink

Question

i have a 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>

it is ok i have an imaged button.

but i want "Ok" text to take in place in the middle of the button image

what is your advice, i have tried something but no response so far.

i think it must be possible, if jsf is a web propramming platform.

SOLVED

i have to add padding to outside object to locate the inside object.

the code in the end:

.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

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

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

不要忘记修复您的width和height值以包含维度。

width: 150px;
height: 50px;