Well I found my own solution with CSS. Thanks tho

If I set it to top align it looks even worse. It's also not what I am requesting.

ok, but top vertical align is default state, so, you need to set top align

It seems like you're not understanding my issue.

Again, I am using the Advanced List Block editor + I have used the vertical align option of Greenshift. However, the vertical align option has a limitation. Namely, when I set it to "center" it wil center perfectly when the sentence is 1 line long. Yet, when the screen gets smaller, AND the text gets broken up into 2 lines of text, the icon is displayed inbetween the two sentences. I DON'T want that. I want it to align in the center of the FIRST sentence (so the upper line of text).

Please take a look at the image attached. I want the icon to go where the red arrow has been placed.

Yes, I am using that one. But I want the bulletpoint to be aligned in the center of the first sentence. The current centering makes it look unreadable whenever there are 2 or more lines of text for 1 bulletpoint (the bulletpoint item is broken up on smaller screens when the text gets too long). Currently, It takes the center of all sentences combined for that bulletpoint item instead of centering for the top sentence.

you can use Advanced List block from Greenshift plugin. it has align option

Hi there,

I am trying to make the advanced list SVG icons responsive by trying to center them to the top sentence of the list item whenever the text gets broken up by the screen width. Currently, the SVG icons are vertically aligned in the center (as set in the settings). However, I would like it to vertically align in the center only for the top sentence (just as normal list ::markers operate). Please see the first image of how it is displaying now, and the second image for how I want it to align on smaller screens (e.g. 640px<).

Looking forward to your response.