Why do jQuery icons not get aligned with text-align CSS property?

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.

2012-04-04 20:46
by Rondel

Try text-align: center; on the span itsel - David Bélanger 2012-04-04 21:41

@DavidBélanger text align center on the span doesn't work either. I tried that as wel - Rondel 2012-04-05 13:43

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>

2012-04-04 20:54
by Jonathan Payne