css - 如何将td中的Font Awesome图标居中？

Question

我使用font-awesome作为我的图标和简单的表格。

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

有人更清楚如何解决这个问题？

谢谢。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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 css中的td

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