Center text to image that is a bulletpoint - html

Question

I'm using images as bulletpoints for my Github Pages (markdown files), as described here. Now, I'd like to center the text next to the image vertically. This is shown here (cf. lower third of page), but I have to do it with inline css and cannot get it to work.
What I have so far:
<ul style="list-style-image: url('/assets/images/thumb.jpg'); padding-left: 120px;">
<li>I’m writing a long list item 1 so you can see what happens when the text wraps across multiple lines</li>
</ul>
gives me
when I'd ideally want it to look like:
I already tried setting the line height, but this results in weirdness when there's a linebreak, as is the case here. I read about flexbox, but am unsure how to use it inline. Any help is appreciated!
I repeat: IT MUST BE INLINE !!

Answer 1

Why don't use in your HTML something like this:
<div class='list-item'>
<img src='/assets/images/thumb.jpg' class='bullet-image'/>
<p class='item-text'>Lorem ipsum...</p>
</div>
And then in your CSS you could add:
.list-item {
display: flex;
align-items: center;
justify-content: center;
}
That should do the trick. Then you can re-size the image as you like.
EDIT:
Another thing you can do, using inline styles is something like this:
<ul>
<li style="display: flex; justify-content: center; align-items: center">
<img src='/assets/images/thumb.jpg' style=""/>
<p> I’m writing a long list item 1 so you can see what happens when the text wraps across multiple lines </p>
</li>
</ul>
Then you should resize the image to the size you like by adding the width and height properties on the style attribute of the img element