Center jquery ui-icon inside td

Question

I have such a case using gQGrid:

<td role="gridcell" style="text-align:center;" title="" aria-describedby="BaseBetsGrid1_approved"> <span class="ui-icon ui-icon-closethick"/> </td> 

How can i use it?

I tried to wrap it in a div and took the wraptocenter class from here: http://www.brunildo.org/test/img_center.html

 <style type="text/css"> .wraptocenter { display: table-cell; text-align: center; vertical-align: middle; } .wraptocenter * { vertical-align: middle; } /*\*//*/ .wraptocenter { display: block; } .wraptocenter span { display: inline-block; height: 100%; width: 1px; } /**/ </style> <!--[if lt IE 8]><style> .wraptocenter span { display: inline-block; height: 100%; } </style><![endif]--> <td role="gridcell" style="text-align:center;" title="" aria-describedby="BaseBetsGrid1_approved"> <div class="wraptocenter"> <span class="ui-icon ui-icon-closethick"/> </div> </td> 

But that does not help.

How can I do this with minimal CSS styles?

maybe margin-left will be easier?

Answer 1

Try it...

 <span style='display:block; margin: 0 auto;' class='ui-icon ui-icon-check'></span> 

Answer 2

While this question is nine months old when I write this answer, I hope that this solution will at least help the next person who needs to solve this problem.

I am working with the jQuery dataTables plugin and trying to find a solution to this problem today when I came across this page.

I tried a suggestion from Yasen that I followed as shown here:

 <td><span class="ui-icon ui-icon-folder-collapsed" style="background-position:center; display:inline-block;"></span></td> 

While this centered the icon, the icon was not the expected icon.

Instead, the right side of one icon, the left side of another icon, and the space between them were displayed.

It seemed that the viewport had moved to the center, but the source of the ui-icon remained stationary.

Based on this observation, I used a little intuition to create the following (nicely formatted for clarity):

 <td> <span style="background-position:center; display:inline-block;"> <span class="ui-icon ui-icon-folder-collapsed"></span> </span> </td> 

This implementation did the trick!

EDIT:

I thought that was all about it, but when I get back to my code, I realized that there was still a class applied to mine that contained the style

 text-align: center; 

When I removed the class from, the ui icon was no longer centered!

After a little testing, I defined the following implementation as the right solution for centering jQuery ui-icon:

 <td style="text-align: center;"> <span style="display:inline-block;"> <span class="ui-icon ui-icon-folder-collapsed"></span> </span> </td> 

Glad I got it! Good luck.

Answer 3

I can only assume that the problem is out of range. This is not a block element. So try adding this CSS to it

 background-position:center; display:inline-block; 

Thus, the SPAN will receive the entire TD, and the icon, which is the background image for the SPAN, will be centered in this case.