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

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/