Css GWT按钮图像/文本对齐

我正在尝试创建带有自定义颜色和图像/文本的按钮。添加颜色和图像/文本非常容易，但现在我遇到了垂直对齐的问题。“文本对齐：居中”帮助我实现了水平对齐，但在垂直对齐方面没有任何帮助

<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>

.gwt-b{
利润率：50像素；
高度：23px；
宽度：60px；
颜色：#fff；
字体大小：12px；
字体系列：arial，无衬线；
文本对齐：居中；
垂直对齐：中间对齐；
背景：-webkit线性梯度（顶部，4d90fe，357ae8）；
边框：1px实心#3079ED；
轮廓颜色：#3079ED；
轮廓宽度：3倍；
}
点击我

以下是我得到的：

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

IE8+

---

它有助于文本，但对图像没有帮助

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