Центрирование текста в изображенной команде Link

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>

все в порядке, у меня есть кнопка с изображением.

но я хочу, чтобы текст "Ok" занимал место в середине изображения кнопки

что вы посоветуете, я что-то пробовал, но пока не получил ответа.

Я думаю, что это возможно, если 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;