Вертикально центрировать div внутри другого div, который не имеет фиксированной высоты. ⇐ CSS

[Anonymous]

В коде я пытаюсь выровнять хвост речевого пузыря примерно по центру изображения, независимо от высоты речевого пузыря или размера изображения. В идеале я всегда хочу, чтобы изображение было центрировано на текущей высоте оболочки, так же, как хвост речевого пузыря соотносится с высотой самого речевого пузыря.
Однако ни один из них попытки до сих пор, казалось, работали. Как этого добиться?
Сейчас у меня есть следующий код:

Код: Выделить всё

@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%;
}

Код: Выделить всё

[img]https://images.squidge.org/images/2024/04/09/biscuit_portrait.png[/img]


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.

Подробнее здесь: https://stackoverflow.com/questions/783 ... xed-height