td 元素内的垂直对齐字体答案

【问题标题】：vertical align fontawesome inside td elementtd 元素内的垂直对齐字体
【发布时间】：2020-09-23 04:55:06
【问题描述】：

我有一个<i> 元素，在<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>

【问题讨论】：

您是否尝试过在fa-folder 上使用line-height: inherit 属性？
你能展示你的css吗？

标签： html css vertical-alignment

【解决方案1】：

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

line-height: 10px;

或使用否定来提升它

line-height: -10px;

【讨论】：

【解决方案2】：

在<td> 中使用flexbox：

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

【讨论】：