在代码中，我尝试将语音气泡的尾部与图像的大致中心对齐，无论语音气泡的高度或图像的大小如何。理想情况下，我总是希望图像以包装器当前高度为中心，就像语音气泡的尾部以语音气泡本身的高度为中心一样。
然而，到目前为止，所有尝试似乎都没有奏效。我怎样才能实现这个目标？
我目前有以下代码：
@text: black;
@bkg: white;
@accent: rgba(75, 75, 75);
.wrapper {
padding: 2rem 0;
}
.wrapper, .wrapper * {
white-space: pre-line;
}
.bubble {
background: gray;
min-height: 225px;
padding:10px;
max-height:auto;
width: 60%;
border-radius: 10px;
color: black;
position: relative;
text-align:center;
display: table;
}
.bubble:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-left-color: gray;
border-right: 0;
border-bottom: 0;
margin-top: -10px;
margin-right: -20px;
}
.bubble span {
display: table-cell;
vertical-align: middle;
}
.image {
min-height:10px;
position: absolute;
right: 0;
width: 35%;
}
.image img {
max-width: 100%;
}<div class="wrapper">
<div class="image">
<img src="https://images.squidge.org/images/2024/04/09/biscuit_portrait.png" class="bbcode_image" loading="lazy">
</div>
<div class="bubble">
<span style="font-size:10pt">
elit enim in ex. Cras auctor lorem id lobortis feugiat. Maecenas egestas diam molestie ex tincidunt, eget tristique lectus sollicitudin. Aliquam quis risus facilisis nulla placerat ornare bibendum porta metus. Nulla placerat efficitur tincidunt. Nunc mattis neque non lectus interdum posuere. Curabitur id neque congue nibh condimentum molestie nec et mauris. Vivamus sed quam vitae leo varius sollicitudin et eget metus. Cras vestibulum ultrices viverra. Fusce accumsan scelerisque sapien, id pharetra massa sagittis eu. Nulla nec lectus accumsan, ultricies purus sagittis, consectetur lorem. Nam suscipit diam ac mauris ultricies rutrum. Sed auctor, augue eu porttitor suscipit, urna leo blandit ante, ac commodo ante augue ac odio. Vestibulum faucibus imperdiet purus, id gravida nisl rhoncus vitae. Etiam rhoncus dictum sem, nec imperdiet purus consectetur nec. Mauris sed mi scelerisque, consectetur quam a, malesuada orci.elit enim in ex. Cras auctor lorem id lobortis feugiat. Maecenas egestas diam molestie ex tincidunt, eget tristique lectus sollicitudin. Aliquam quis risus facilisis nulla placerat ornare bibendum porta metus. Nulla placerat efficitur tincidunt. Nunc mattis neque non lectus interdum posuere. Curabitur id neque congue nibh condimentum molestie nec et mauris. Vivamus sed quam vitae leo varius sollicitudin et eget metus. Cras vestibulum ultrices viverra. Fusce accumsan scelerisque sapien, id pharetra massa sagittis eu. Nulla nec lectus accumsan, ultricies purus sagittis, consectetur lorem. Nam suscipit diam ac mauris ultricies rutrum. Sed auctor, augue eu porttitor suscipit, urna leo blandit ante, ac commodo ante augue ac odio. Vestibulum faucibus imperdiet purus, id gravida nisl rhoncus vitae. Etiam rhoncus dictum sem, nec imperdiet purus consectetur nec. Mauris sed mi scelerisque, consectetur quam a, malesuada orci.
Nunc arcu justo, tincidunt sit amet augue et, consectetur vehicula enim. In hac habitasse platea dictumst. Cras sed posuere metus. Cras feugiat, ex sit amet pretium vestibulum, neque quam fringilla augue, sed efficitur ligula quam non diam. Phasellus pellentesque euismod nunc sed mollis. Sed faucibus leo non eros bibendum, cursus gravida lacus scelerisque. Vivamus at congue felis, vitae aliquet leo. Duis at orci sed arcu condimentum suscipit. Vestibulum laoreet enim id metus ultrices aliquet eget a nunc.
</span>
</div>
</div>
