jquery ui图标未居中于span上

我有一个保存jQueryUI图标的范围，还有一个获取错误状态的外部范围

但是，图标向上移动，因此部分图标不包含在外部跨距中。我可以说，因为ui状态错误，外部跨距有一个红色背景，图标部分位于红色区域上方

你知道为什么吗

<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>

你能试试这个吗（适用于FF、IE和Chrome）：

HTH

试试这个：

<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>

在chrome中工作正常。而且，尽管我已经做了多年的用户界面工作，我还是很困惑你为什么要这样设置它。如果你只是想在图标周围有一个边框，为什么不通过css设置它并删除外部div呢？我不仅仅想要一个边框，我希望它有ui状态错误。我认为使用静态边框颜色和背景颜色是错误的做法，而不是使用Jqueryui提供的css类，如果主题颜色发生变化，css类就会发生变化。我需要外部跨距的原因是，如果我将ui状态错误应用于内部跨距，那么它本身的图标就会出现问题。我认为这会产生一个问题，即图像页的哪些像素用于图标。我必须让

显示：inline块

，否则它不会与周围的元素显示为inline，例如，它旁边的另一个图标。为了便于操作，您可能需要解释您的答案

<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>

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