css - error - ¿Cómo centrar iconos de Font Awesome horizontalmente?

font awesome menu

Question

Tengo una tabla con un icono de Font Awesome y quiero alinear los iconos de texto a la izquierda y al centro. Intenté con el 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 intenté establecer text-align:center !important; pero no funciona. ¿Qué hice mal?

Answer 1

Agregue su propio sabor del estilo asombroso de la fuente

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

que junto con tu

td i {
    text-align:center;
}

debería centrar solo los íconos.

Answer 2

Como no quieres agregar una clase a las celdas que contienen un ícono, ¿qué tal esto ...

Envuelva el contenido de cada td sin ícono 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.

Answer 3

Dale una clase a tu celda que contiene el icono

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

y entonces

.icon{
    text-align: center;
}

Answer 4

OP puede usar selectores de atributos para obtener el resultado que desea. 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/

Answer 5

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

.icon-stack{ margin: auto; display: block; } 

Answer 6

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

td {
    text-align: center;
}

http://jsfiddle.net/kB6Ju/2/