html - css - 如何在 td 中居中 Font Awesome 图标？

Question

我正在为我的图标和一个简单的表格使用 font-awesome。

如何让这个图标位于 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>

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