图标不与按钮内的文本对齐

Question

我有一个按钮元素，里面有一个跨度，用于在按钮内显示图标。但他们并不一致。我提到了许多论坛帖子，他们建议中间对齐 - 但这不能解决问题。任何其他方式来解决这个问题？

小提琴

http://jsfiddle.net/Vw9Z6/432/

HTM代码

<button class="ui-button ui-widget ui-state-default app-custom-button-request"><span class="ui-button-icon-primary ui-icon ui-icon-star app-span"></span>Request</button> 

CSS

.app-custom-button-request 
{ 
    color:red; 
    margin-left:10px; 
    display: inline-block; 
    vertical-align: middle; 
    width:200px; 
} 

截图

Answer 1

这修复它：

.ui-icon {display: inline-block;} 

的.ui-icon设置为block显示。

预览

小提琴：http://jsfiddle.net/5c5zc72d/