Css 如何相对于浮动图像垂直对齐文本？

有许多问题可以解决这个问题，但没有一个问题可以解决相对于浮动图像或块级元素的垂直对齐问题

...
<td>
  <span style="vertical-align: middle">This should be vertically centered relative to the image</span>
  <img src="something" style="float: right" />
</td>
...

。。。
这应该相对于图像垂直居中
...

这不会产生所需的结果，因为图像是浮动的。我已经尝试了很多方法，包括在标记后添加一个标记，使跨度显示为块级元素，以及其他不浮动图像的方法（与包含对象的右侧对齐），但都没有成功

更新：

---

我一直无法使任何建议的解决方案发挥作用。如果这件事做不到，那就这样吧，但我会把它留着，直到我确定它做不到为止。我用HTML创建了一个，希望有人能编写CSS来演示解决方案。

您需要将span和image包装在同一个

中，并将浮点值应用于div

...
<td>
  <div style="float: right;">
    <span style="vertical-align: middle">This should be vertically centered relative to the image</span>
    <img src="something" />
  </div>
</td>
...

。。。
这应该相对于图像垂直居中
...

或

。。。
这应该相对于图像垂直居中
...

。。。
此处文本
图像在这里
...

---

默认情况下，标记是中间对齐的

如果不修改给定的文档结构（至少是给定的CSS2.1），则无法完成此操作。如果有人能提供CSS3解决方案的话，我仍然希望看到它。

这会使文本也向右浮动，对吗？理想的结果是文本基本上是左对齐的，而图像是右对齐的。您可以保留现有内容，并将“垂直对齐：中间”放在屏幕上。我在OR下使用此选项更新了我的答案。您可能还需要在下面添加一个
。是的，这会简单得多。请记住，您需要跨越这些单元格上方和下方的其他单元格。天哪，我真的错过了桌面驱动的设计哦，你的解决方案把它们一分为二。这是一个动态插入到文本中的图像。也许你可以在td中有一个表？我不知道您的动态插入代码是如何工作的，但如果您可以使用如图所示的表，它将更加简单（而且可靠）。我更新了我的代码。反对将表格作为布局的一部分。如果必须，请使用带有适当标记的

display:table cell

。不幸的是，并非所有浏览器都支持

table cell

。文本是否足够长和/或容器是否足够小，以至于需要将文本插入图像并进行换行？

...
<td style="vertical-align: middle;">
  <span>This should be vertically centered relative to the image</span>
  <img src="something" style="float: right;" />
</td>
...

...
<td>
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td>text here</td>
      <td style="text-align: right">image here</td>
    </tr>
  </table>
</td>
...