仅当文本较短时实现图片旁文本的垂直居中

我需要实现图片旁文本的垂直对齐效果，文本可短可长，同时要适配响应式布局——父容器可能会收缩。另外我认为图片和长文本垂直居中的视觉体验不佳，所以希望避免这种布局方式。以下是我想要实现效果的示例代码：

CSS 代码 #

.parent {
    display: block;
    background-color: tan;
    width: 300px;
}

.parent + .parent {
    margin-top: 0.25rem;
}

.text {
    display: inline-block;
    width: 150px;
}

.image {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 0;
}


.parent.a .image {
    vertical-align: middle;
}

.parent.b .image,
.parent.c .image {
    vertical-align: top;
}

.parent.b .text {
    margin-top: 25px;
}

HTML 代码 #

<div class="parent a">
    <img class="image" src="https://placekitten.com/100/100/" />
    <span class="text">你真可爱</span>
</div>
<div class="parent b">
    <img class="image" src="https://placekitten.com/100/100/" />
    <span class="text">Lorem ipsum dolor sit amet，狗狗很可爱，猫咪也很棒</span>
</div>
<div class="parent c">
    <img class="image" src="https://placekitten.com/100/100/" />
    <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan ex elit, sed congue tortor ullamcorper et. Mauris ante diam, fermentum at ultrices sit amet, dapibus id libero. Phasellus aliquam arcu sed elit pulvinar rutrum. Nam in sem faucibus, aliquam augue ac, posuere massa.</span>
</div>

内容的提问来源于stack exchange，提问作者WoodrowShigeru