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

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?

CodePudding user response：

The display: inline-block; renders the vertical-align ineffective.

Explanation: vertical-align is only valid for display: table-cell. So, if you change the display mode, the alignment becomes invalid.

Solution: Remove the display from the CSS style.

CodePudding user response：

Add line-height:26px on td

<table>
<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; line-height: 26px;">1 </td>
</tr>
</table>

CodePudding user response：

Delete the both of "display:inline-block" and "vertical-align:middle" then add "text-align: center".

CodePudding user response：

How about adding span for the text?

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