仅当文本较短时，图像旁边的垂直居中文本

Question

我想垂直对齐图像旁边的文本。文本可短可长 - 并且考虑到响应性，父容器也可以缩小。

但我个人发现图像应该不位于长文本旁边居中。看起来不太好。

这是我想要的模型。

.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;
}

<div class="parent a">
    <img class="image" src="https://placekitten.com/100/100/"></img>
    <span class="text">You are sweet</span>
</div>
<div class="parent b">
    <img class="image" src="https://placekitten.com/100/100/"></img>
    <span class="text">Lorem ipsum dolor sit amet, dogs are cute and cats are great</span>
</div>
<div class="parent c">
    <img class="image" src="https://placekitten.com/100/100/"></img>
    <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>

Answer 1

我研究过 Flexbox ...所有

align-items

选项都不能满足我，但您仍然可以通过文本元素上的

margin-top/bottom: auto

来实现它。

.parent {
    display: inline-flex;
}

.text {
    margin-top: auto;
    margin-bottom: auto;
}

演示