Centro align jQuery UI-icono dentro td

Question

tengo tal caso, el uso gQGrid:

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

¿En qué puedo galope ella?

yo estaba tratando de envolver en al div y tomó wraptocenter clase a partir de aquí: 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> 

pero es no ayuda.

¿Cómo puedo hacer eso con estilos mínimos de CSS?

puede estar especificando margin-left sería más fácil?

Answer 1

Solo puedo sugerir que el problema proviene de la envergadura. No es un elemento de bloque. Así que trate de este addign CSS para que

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

De esta manera el SPAN se llevará a todo el TD y el icono que es una imagen de fondo para el SPAN en este caso será centrada.

Answer 2

Si bien esta pregunta tiene nueve meses cuando escribo esta respuesta, espero que esta solución al menos ayude a la siguiente persona que necesite resolver este problema.

Estoy trabajando con el plugin de jQuery dataTables y estaba tratando de encontrar una solución a este problema hoy cuando encontré esta página.

Probé la sugerencia de Yasen, que he implementado como se muestra aquí:

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

Si bien esto centrado en el icono, el icono no era el icono esperado.

En su lugar, lo que se mostró fue el lado derecho de un icono, el lado izquierdo de otro icono y el espacio entre ellos.

Parecía que la ventana de visualización se había movido hacia el centro, pero la fuente de ui-icon permanecía estacionaria.

Basado esa observación, he usado un poco de intuición para producir el siguiente (con un formato agradable para mayor claridad):

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

Esta implementación hizo el truco!

EDIT:

pensé que era todo lo que había a la misma, pero cuando llegué a mi código, me di cuenta de que todavía había una clase aplicado a mi que contenía el estilo

text-align: center; 

Cuando eliminé la clase de, ¡el icono ui ya no estaba centrado!

Después de un poco más de la prueba, que determina la siguiente implementación a ser la solución correcta para centrar un ui-icono de jQuery:

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

Contento de haber atrapado eso! Buena suerte

Answer 3

Prueba esto ...

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