Cómo centrar iconos impresionante Fuente horizontalmente?

Tengo una tabla con una Fuente Impresionante icono y quiero alinear el texto izquierda y centro iconos. He intentado con centrado <i> pero no funciona:

HTML: 

<td><i class="icon-ok"></i></td>

CSS: 

td, th {
    text-align: left;
}
td i {
    text-align:center;
}

JsFiddle

También traté de establecer text-align:center !important; pero no funciona. ¿Qué hice mal?

Author: Mustapha Aoussar, 2013-10-03
Source

6 answers

Añadir su propio sabor de la fuente impresionante estilo

[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    width: 100%;
}

Que, junto con su

td i {
    text-align:center;
}

Debe centrar solo los iconos.

 70
Author: andyb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-03 15:34:46

Uso text-align: center; en el contenedor de bloques del icono (el <td>) - text-align no se aplica a los elementos en línea, solo a los contenedores de bloques: 

td {
    text-align: center;
}

Http://jsfiddle.net/kB6Ju/2 /

 20
Author: Adrift,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-03 16:20:22

Dar una clase a su celda que contiene el icono

<td class="icon"><i class="icon-ok"></i></td>

Y luego

.icon{
    text-align: center;
}
 7
Author: nilobarp,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-03 15:21:00

Dado que no desea agregar una clase a las celdas que contienen un icono, qué tal esto...

Envuelva el contenido de cada no icono td en un span: 

<td><span>consectetur</span></td>
<td><span>adipiscing</span></td>
<td><span>elit</span></td>

Y usa este CSS:

td {
    text-align: center;
}
td span {
    text-align: left;
    display: block;
}

Normalmente no publicaría una respuesta en esta situación, pero esto parece demasiado largo para un comentario.

 3
Author: thirtydot,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-03 15:32:53

OP puede usar selectores de atributos para obtener el resultado que desee. Aquí está el código adicional que agrega

tr td i[class*="icon"] {
    display: block;
    height: 100%;
    width: 100%;
    margin: auto;
}

Aquí está el jsFiddle actualizado http://jsfiddle.net/kB6Ju/5 /

 3
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-03 15:34:19

Si sus iconos están en una pila de iconos, puede usar el siguiente código: 

.icon-stack{ margin: auto; display: block; }
 3
Author: Coded Container,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-02 19:13:35