web-dev-qa-db-fra.com

Comment centrer les icônes Font Awesome horizontalement?

J'ai une table avec une icône Font Awesome et je veux aligner le texte à gauche et au centre des icônes. J'ai essayé de centrer <i> mais ne fonctionne pas:

HTML:

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

CSS:

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

jsFiddle

J'ai aussi essayé de mettre text-align:center !important; mais ne fonctionne pas. Qu'ai-je fait de mal?

csscss3font-awesome
53
Mustapha Aoussar

Ajoutez votre propre style de police

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

qui avec votre

td i {
    text-align:center;
}

devrait centrer uniquement les icônes.

78
andyb

Utilisation text-align: center; sur le bloc conteneur de l’icône (le <td>) - text-align ne s'applique pas aux éléments en ligne, mais uniquement aux conteneurs de blocs:

td {
    text-align: center;
}

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

21
Adrift

Donnez une classe à votre cellule contenant l'icône

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

puis

.icon{
    text-align: center;
}
7
nilobarp

Puisque vous ne voulez pas ajouter une classe aux cellules contenant une icône, que diriez-vous de cela ...

Enveloppez le contenu de chaque non-icon td dans un span:

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

Et utilisez ce CSS:

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

Je ne posterais normalement pas de réponse dans cette situation, mais cela me semble trop long pour un commentaire.

3
thirtydot

Si vos icônes sont dans une pile d'icônes, vous pouvez utiliser le code suivant:

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

OP, vous pouvez utiliser les sélecteurs d’attributs pour obtenir le résultat souhaité. Voici le code supplémentaire que vous ajoutez

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

Voici la version mise à jour de jsFiddle http://jsfiddle.net/kB6Ju/5/

3
user2578173

j'ai résolu mon problème avec ceci:

<div class="d-flex justify-content-center"></div>

im utilisant bootstrap avec des icônes de police géniales.

si vous voulez en savoir plus, accédez au lien ci-dessous: https://getbootstrap.com/docs/4.0/utilities/flex/

2
Everton Buzzi