центрирование текста в виде изображения commandLink

Question

я есть р: 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;