css - 为什么 jQuery 图标不与 text-align CSS 属性对齐？

Question

我正在使用一些 jQuery UI 图标作为表格中的列标题。跨度没有根据文本对齐属性对齐，我无法找到合理的解决方法。

我已经尝试同时使用text-alignCSS 中的属性和align属性，th并且图标跨度不会居中。相反，它保持左对齐。

HTML

<th align="center" scope="col" style="width:100px;"><a href="javascript:__doPostBack('RuleGrid','Sort$5')"><span class="ui-state-default ui-icon ui-icon-locked"></span></a></th>

CSS

th
{
    text-align:center;
}​

我有一个jsFiddle来描述这个问题。

Answer 1

这似乎只是 IE 中的一个问题，chrome 和 firefox 正确呈现了它。您可以删除 span 标签，然后将类放在 a 标签上。我刚刚添加了样式“margin：0 auto”，它解决了 IE 中的问题。

干杯。

<th scope="col" align="center" style="width:100px;">
    <a href="javascript:__doPostBack('RuleGrid','Sort$5')" class="ui-state-default ui-icon ui-icon-locked" style="margin:0 auto"/>
</th>