Css 动态图像与文本垂直对齐

我如何垂直对齐我不知道应该填充容器其余部分的文本大小的图像

.image,.text { 
    display: inline-block; 
    vertical-align:middle; 
} 

但是，只有当我在文本上设置宽度，这样图像就可以在它旁边滑动

.text {
    width: 100% - .image.width();
}

我可以用javascript实现这一点，但有没有一种方法可以用纯css实现这一点

编辑：我可以通过一个表格来实现这一点。还有更好的办法吗

带表的JSFIDLE：（我不喜欢将表用于布局…）

---

JSFIDLE with inline block（取消css注释）（尝试调整图像和/或容器的大小。文本不会填充容器的全部剩余宽度）

您需要将图像向左浮动，并将文本设置为溢出隐藏。查看我的JSFIDLE：

---

我使用了表格，尽管我讨厌使用表格进行布局：

一些可以是多行的文本。一些可以是多行的文本

能否添加一个HTML表格版本的演示（使用类似的网站），准确显示您要执行的操作？是的，很抱歉我没有执行前面的操作。事实上，表格看起来是最优雅的解决方案。偶尔使用表格进行垂直对齐或等高列是完全合理的。对于一般布局，CSS表在语义上稍好一些（如果您不需要支持IE7及更早版本），但HTML表也可以。展望未来，如果你不需要支持IE9和更早的版本，你可以尝试一下，但这可能有点过头了。Flexbox是不可能的，因为我需要支持IE8+，但我可能会使用css表。我将把这个问题留待一会儿。也许有人有更好的主意。是的，我知道，但图像没有垂直对齐。

img {
    width: 150px; 
    height:150px;
    float: left;
}
p {
    overflow: hidden;
}

.clear {clear: both;}

<table>
    <tr>
        <td>
            <img src="">
        </td>
        <td>
            <p>sometext that can be multiline. sometext that can be multiline.</p>
        </td>
    </tr>
</table>