Center align jquery ui-icon inside td

Question

I have such case, using gQGrid:

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

How may i canter it?

i was trying to wrap it in to div and took 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 it is does not help.

How may i do that with minimum css styles?

may be specifying margin-left would be easier?

Barong

Answer 1

Try this...

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

Ledeen

Answer 2

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

I'm working with the jQuery dataTables plug-in and was trying to find a solution to this problem today when I came upon this page.

I tried the suggestion from Yasen, which I implemented 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, what was displayed was the right side of one icon, the left side of another icon, and the space between them.

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

Based that observation, I used a little intuition to produce 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 there was to it, but when I got back to my code, I realized that there was still a class applied to my that contained the style

text-align: center;

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

After a little more testing, I determined the following implementation to be the correct solution for centering a 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 caught that! Good luck

Coextensive

Answer 3

I can only suggest that the problem comes from the span. It is not a block element. So try addign this CSS to it

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

This way the SPAN will take the entire TD and the icon which is a background image for the SPAN in this case will be centered.

Aleishaalejandra