<a>元素内，<td>元素内

Question

假设我们有以下代码：

<td style="vertical-align: middle; text-align: center;">
  <a style="max-height: 60px; text-align: center; height: 60px; word-break: break-word;">Nav 1</a>
  <a style="max-height: 60px; text-align: center; height: 60px; word-break: break-word;">Nav 2</a>
  <a style="max-height: 60px; text-align: center; height: 60px; word-break: break-word;">Nav 3</a>
</td>

它正确呈现，每个子元素<a>的高度相同，并且文本与middle垂直对齐，因为父元素<td>的元素为vertical-align: middle，正如我所说，元素的高度相同，文字中的字符数相同：

Image 1

现在假设我将更长的文本添加到第一个<a>元素，然后布局中断。在此图片中可以看到，<a>元素内的文本不再垂直对齐：

Image 2

如何在元素内部保持垂直对齐？ 注意：我不能使用flexbox，因为这是用于电子邮件客户端（不支持flexbox）的模板的代码段。