I'm attempting to make sure the tail of the speechbubble aligns with the center of the image, regardless of their respective heights. Essentially, I want the image to always be centered within the current height of the wrapper, similar to how the speechbubble tail adjusts its position based on the speechbubble height.
Despite trying various methods, none seem successful so far. How can I accomplish this?
Here is the code I am currently working with:
@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......content truncated for brevity....
...tincidunt eget a nunc.
</span>
</div>
</div>