垂直对齐：中间； 不在我的工作<td>

Question

我创建了一个，但它没有将我的文本与 . 我尝试添加 !important 但结果仍然无效。 我怎样才能解决这个问题？

下面是我的代码：

 <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>

请帮忙？

Answer 1

display: inline-block; 使vertical-align无效。

说明： vertical-align仅对display: table-cell有效。 所以，如果你改变显示模式，对齐就会失效。

解决方案：从 CSS 样式中删除display 。

Answer 2

在td上添加line-height:26px

 <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>

Answer 3

删除“display：inline-block”和“vertical-align：middle”，然后添加“text-align：center”。

Answer 4

如何为文本添加跨度？

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