css - Comment centrer les icônes Font Awesome dans un td?

Question

J'utilise font-awesome pour mes icônes et un tableau simple. Comment puis-je faire de cette icône soit au centre de la td? J'essayais d'utiliser text-align: center, mais ne fonctionnait pas.

Quelqu'un a une meilleure idée comment résoudre ce problème?

merci.

jsfidle: https://jsfiddle.net/s15dxabc/

table i { 
 
    color: red; 
 
    background: #ffffff; 
 
    border-radius: 20px; 
 
    padding: 5px 0; 
 
    width: 30px; 
 
    margin-right: 5px; 
 
    border: 2px solid black; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <td> this icon should be in the center</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td><i class="fa fa-minus"></i></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

utilisation align:center attribut dans td

table i { 
 
    color: red; 
 
    background: #ffffff; 
 
    border-radius: 20px; 
 
    padding: 5px 0; 
 
    width: 30px; 
 
    margin-right: 5px; 
 
    border: 2px solid black; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <td> this icon should be in the center</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td align="center"><i class="fa fa-minus"></i></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Ou text-align:center dans td css

table i { 
 
    color: red; 
 
    background: #ffffff; 
 
    border-radius: 20px; 
 
    padding: 5px 0; 
 
    width: 30px; 
 
    margin-right: 5px; 
 
    border: 2px solid black; 
 
} 
 
table td { 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <td> this icon should be in the center</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td align="center"><i class="fa fa-minus"></i></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

Vous pouvez utiliser le CSS

.center-table td{ 
display: flex; 
align-items:center; 
justify-content:center; 
} 

Dans le tableau ajouter une classe

<table class="center-table">