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

Set the CSS text-align property to center and set the line-height to the same height as element's height:

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

Don't forget to fix your width and height values to include the dimensions.

width: 150px;
height: 50px;