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

Question

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

我怎样才能让这个图标在中心td？我正在尝试使用text-align: center，但没有奏效。

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

谢谢你。

jsfiddle: 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在tdcss 中

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>