jquery ui图标不以span为中心

Question

我有一个包含jquery-ui图标的span，以及一个获得错误状态的外跨区。

但是图标向上移动，因此图标的一部分不包含在外跨度中。我可以告诉你因为ui-state-error，外跨区有一个红色背景，图标部分位于这个红色区域之上。

任何想法为什么？

<span style="width:20px;height:20px;display:none" class="userNameInvalidIcon ui-state-error">
    <span style="display:inline-block" class="ui-icon ui-icon-circle-close"/>
</span>

Answer 1

试试这个：

<span style="width:20px;height:20px;display:none" class="userNameInvalidIcon ui-state-error">
    <span style="display:inline-block;vertical-align: middle;" class="ui-icon ui-icon-circle-close"/>
</span>

Answer 2

你能尝试一下吗（适用于FF，IE和Chrome）：

<div style="width:17px;" class="ui-corner-all ui-state-error">
    <span class="ui-icon ui-icon-circle-close"></span>
</div>

HTH

Answer 3

.ui-icon
{
    position: relative !important;
    margin: 0px !important;
    padding: 0px !important;
    height: 100% !important; 
    width: 100% !important;
    top: 0px !important;
    left: 0px !important;
}