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

Question

我有一个按钮元素，里面有一个跨度，用于在按钮内显示一个图标。但他们没有对齐。我提到了很多论坛帖子，他们建议中间对齐——但这并不能解决问题。还有其他解决问题的方法吗？

fiddle

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 显示。

预览

fiddle :http://jsfiddle.net/5c5zc72d/