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>

Answer 2

将两个span元素都放在div内，因为div是块级元素，并添加样式style =“ text-align：center;”。

<div id="root"></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"/>
<div style="text-align: center;"><span >Line 1 Content</span><br>
<span>Line 2 Content</span></div>

</a>


</tr></table></td></tr></table></td></tr>

HTML：两行文字的居中垂直对齐

2 个答案: