HTML:两行文本居中垂直对齐

Question

基本上，此代码将图像 (223 x 83) 放在左侧，并在图像右侧放置两行文本。整个盒子的整体高度为85px，宽度为1024px。

我将如何垂直对齐文本以确保两条线在整个框中垂直居中？是否可以在不使用 div 的情况下使用此代码执行此操作？

<tr><td><table><tr><td><table><tr><td>

<a href="#link">
<img src="linkToAnImage" style="width:223px; height:83px; border:1px #000000 solid;" align="left"/>
<span>Line 1 Content</span>
<br/>
<span>Line 2 Content</span>
</a>


</tr></table></td></tr></table></td></tr>

感谢您的帮助。

Answer 1

因为现在大多数浏览器都支持display:flex:

.valign-content-mid {
  display: flex;
  align-items: center;
}

并将您的标签用作包装器

<a href="#link" class="valign-content-mid">
  <img src="linkToAnImage" style="width:223px; height:83px; border:1px #000000 solid"/>
  <span>
  Line 1 Content<br/>
  Line 2 Content
  </span>
</a>