图片和单行文字对齐比较简单,在图片和文字(行内元素)上加 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 标签转换为行内元素,然后就可以使用单行文字对齐的方式进行对齐,内部再去通过其他方法进行换行。