css - 可拉伸(stretch)/可扩展的垂直对齐文本(相对于图像)

Question

我想在图像旁边放置一些文本，其中文本相对于图像垂直对齐。但是，我不知道窗口的宽度，所以我希望文本容器能够扩展以填充可用空间。

我试过简单地将 vertical-align:middle 放在文本容器上。这种方法可行，但如果文本太长，文本将换行到图像下方。为了解决这个问题，我在文本容器上使用了 display:inline-block。然而，这会将整个文本容器置于图像下方!

到目前为止，我有这样的东西:

<span><img src="img.gif" /></span>
<span style="display:inline-block; vertical-align:middle">Text goes here</span>

Answer 1

包裹图像的 span 元素应应用相同的样式。