css - 如何在字体集中字体真棒图标？

Question

我使用字体真棒为我的图标和一个简单的表。

如何让此图标位于td的中心？ 我正在尝试使用text-align: center，但没有奏效。

有人有一个更好的主意如何解决这个问题？

谢谢。

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

使用align:center属性在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>

或者text-align:center在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

您可以使用CSS

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

在表中添加一类

<table class="center-table">