GWT PushButton image/text alignment

Question

Я пытаюсь создать кнопки с пользовательским цветом и изображением/текстом на нем. Чтобы добавить цвет и изображение/текст было довольно просто, но теперь у меня проблемы с вертикальным выравниванием. «text-alignment: center» помогло мне с горизонтальным выравниванием, но не удачи с вертикальной.

<ui:style> 
    .gwt-b { 
     margin: 50px; 
     height: 23px; 
     width: 60px; 
     color: #fff; 
     font-size: 12px; 
     font-family: arial, sans-serif; 
     text-align: center; 
     vertical-align: middle; 
     background: -webkit-linear-gradient(top,#4d90fe,#357ae8); 
     border: 1px solid #3079ED; 
     outline-color: #3079ED; 
     outline-width: 3px; 
    } 
</ui:style> 

<g:HorizontalPanel> 
    <g:PushButton ui:field='pushButton' enabled='true' addStyleNames="{style.gwt-b}"> 
     <g:upFace image="{res.search}"> 
     </g:upFace> 
    </g:PushButton> 

    <g:PushButton ui:field='pushButton2' enabled='true' addStyleNames="{style.gwt-b}"> 
     <g:upFace> 
      <b>click me</b> 
     </g:upFace> 
    </g:PushButton> 
<g:HorizontalPanel> 

Вот что я получил:

Answer 1

.gwt-b {   
    ... 
    line-height: 12px; 
    ... 
} 

Answer 2

IE8 +

.gwt-b { 
    ... 
    display: table-cell; 
    vertical-align: middle; 
    ... 
}