Question

解决此问题有很多问题，但没有一个问题涉及相对于浮动图像或块级元素的垂直对齐。

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

由于图像是浮动的，因此不会产生所需的结果。我已经尝试了很多东西，包括在标签之后添加一个，将span显示为块级元素，以及其他方式来定位图像（与包含的右侧对齐）而不浮动它，但是没有成功

更新我无法获得任何提议的解决方案。如果不能做到这一点，那就这样吧，但是我要把它打开，直到我确定不能这样做。我已经用HTML创建了一个jsFiddle，希望有人可以编写CSS来演示解决方案。

Answer 1

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

＆lt; td＆gt;标签默认为对齐中间

Answer 2

您需要将span和图像包装在同一<div>中，然后将浮点数应用于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>
...

OR

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

Answer 3

如果不修改给定的文档结构，至少在给定CSS2.1的情况下，这是不可能做到的。我仍然希望看到一个CSS3解决方案，如果有人可以提供一个。

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

3 个答案: