css - error - ¿Cómo centrar iconos de Font Awesome horizontalmente?
font awesome menu (6)
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;
}
También intenté establecer text-align:center !important; pero no funciona. ¿Qué hice mal?
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.
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.
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;
}
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/
Si sus iconos están en una pila de iconos, puede usar el siguiente código:
.icon-stack{ margin: auto; display: block; }
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;
}