Question

I’m using some of the jQuery UI icons as a column headers in a table. The spans do not align based on the text align property and I haven’t been able to find a reasonable workaround.

I’ve tried using both the text-align property in CSS and the align property of th and the icon span will not center. Instead it keeps left aligned.

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;
}​

I’ve got a jsFiddle to depict the problem.

Answer 1

This appears to only be an issue in IE, chrome and firefox rendered it correctly.
You can remove the span tag and just put the classes onto the a tag instead. I just added the style “margin: 0 auto” and it fixed the issue in IE.

Cheers.

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