圖標與按鈕內的文本不對齊

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/