css 图片和多行文字对齐

图片和单行文字对齐比较简单，在图片和文字（行内元素）上加 vertical-align: middle;。

图片与多行文字对齐的解决方法，就是将多行包装成单行，单行内再用 <br/> 进行换行。

以下我调试过的一个版本：

<style>
img {
    vertical-align: middle;
}
p {
    display: inline-block;
    vertical-align: middle;
}
</style>
<img src="xxx" alt="xxx" />
<p>
    <span>海滨擎蟹</span>
    <br/>
    <span>超级VVVIP</span>
</p>

将 p 标签转换为行内元素，然后就可以使用单行文字对齐的方式进行对齐，内部再去通过其他方法进行换行。