CSS-如何在Td中居中顯示“真棒字體”圖標？

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

在td使用align:center屬性

 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中的text-align:center

 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">