垂直对齐 td 元素内的 fontawesome

Question

我有一个 <i> 元素，里面有 fontawesome 图标 <td> 我希望它垂直居中

这里是截图：

这是我的 html:

<tbody>
....
   <tr>
      <td style="word-wrap: break-word;min-width: 480px;max-width: 480px;">
         <i style="margin-right: 8px; vertical-align : middle;" class="fa fa-folder"></i>
         <h2 style="width:93%; white-space: pre-wrap; ">cccccccccccccccccccccccccccccccccccccccccccccccccc</h2>
      </td>
   </tr>
</tbody>

Answer 1

在<td>里面使用flexbox:

td {
  display: flex;
  align-items: center;
}

Answer 2

您可以简单地使用 line-height 来垂直调整它，例如：

line-height: 10px;

或使用负数来提升它

line-height: -10px;

垂直对齐 td 元素内的 fontawesome

vertical align fontawesome inside td element

html

css

vertical-alignment