css - jQuery アイコンが text-align CSS プロパティで整列されないのはなぜですか?

Question

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

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>