Search code examples
htmlcssvertical-alignment

vertical align fontawesome inside td element

I have an <i> element with fontawesome icon inside <td> I want it to be vertically centered

here a screenshot:

enter image description here

here my 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>
Solution

  • Use flexbox inside the <td>:

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