なぜjQueryのアイコンがテキストアライメントのCSSプロパティと整列しないのですか？

Question

私はいくつかのjQuery UIアイコンを表の列ヘッダーとして使用しています。スパンはテキストの整列プロパティに基づいて整列されず、私は妥当な回避策を見つけることができませんでした。

CSSのtext-alignプロパティとalignプロパティの両方を使用して試しましたが、アイコンスパンは中央になりません。代わりに、左揃えにします。

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の問題であるように見えます。 スパンタグを削除して、代わりにタグを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>