vertical-align:middle; not working in my <td>

Issue

I created a but it's not aligning my text to the . I've tried adding !important but the results are still not working. How can I fix this?

Here is my code below:

  <div>
       <table width="100%" cellspacing="0" cellpadding="0" role="presentation">
  
       <!--Bullet 1 -->
       <tr>
       <td align="center" style="background-color:#dc1f26;height: 26px; width: 26px; border-radius: 50%; display: inline-block;color: #ffffff;font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:16px;vertical-align: middle!important;">1
     </td>
     </tr>
    </table>
    </div>

Please help?

Solution

How about adding span for the text?

<span style="display:flex; height:100%; align-items:center; justify-content:center;">1</span>

Answered By - dita