<td>设置vertical-align:middle样式不生效的解决方法

核心原因 #

样式不生效的根源是你给<td>加了display: inline-block，覆盖了td默认的display: table-cell属性，两个显示模式下vertical-align的作用逻辑完全不同：

• 元素为table-cell（td默认显示类型）时，vertical-align控制单元格内部内容的垂直对齐，设置middle即可让内部文本垂直居中
• 元素改为inline-block后，vertical-align仅控制这个元素本身和同行其他行内/行内块元素的对齐关系，不会作用于元素内部的文本，哪怕加!important也无法实现内部内容居中的效果。

修复方案 #

直接删除td内联样式里的display: inline-block声明，让td保持默认的table-cell显示类型，原有vertical-align: middle即可正常生效，不需要额外加优先级声明。
修复后完整代码：

<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%;color: #ffffff;font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:16px;vertical-align: middle;">1
      </td>
    </tr>
  </table>
</div>

特殊场景兼容方案 #

如果因为业务需求必须保留行内块显示特性，可以改用flex布局实现内部文本的水平+垂直居中，调整样式如下：

<td align="center" style="background-color:#dc1f26;height: 26px; width: 26px; border-radius: 50%; display: inline-flex;align-items: center;justify-content: center;color: #ffffff;font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:16px;">1
</td>

这种写法不需要依赖vertical-align，直接通过flex的对齐属性控制内容位置，兼容性可以满足绝大多数业务场景。

内容的提问来源于stack exchange，提问作者Mam'Cool