Align list markers to top of embeds?

[peeragetalkers]

When a list item contains an embed, I’d like the list marker to be aligned to the top of that embed.

Perhaps a better way to phrase it is: I’d like for embeds in list items to extend downwards instead of upwards.

How can this be achieved?

[peeragetalkers]

A solution was shared on Discord:

.HyperMD-list-line .image-embed,
li .image-embed {
    vertical-align: top;
}

But another snippet I use (to center images) appears to break this solution in Reading view:

img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
}  
 .markdown-source-view.mod-cm6 .cm-content > * {
        margin: auto auto !important;
}

Also, I wonder if it would it be possible to make the snippet support any kind of embed (video, audio), not just images?

[peeragetalkers]

This seems to work for all embed types:

.markdown-preview-view li .internal-embed.media-embed.image-embed,
.markdown-source-view.mod-cm6 .cm-line .internal-embed.media-embed,
li .internal-embed {
    vertical-align: top !important;
    margin-top: 0 !important;
    display: inline-block !important;
}

---

Reconciled ‘center images’ snippet:

:is(.media-embed, img):not(li *) {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}  
.markdown-source-view.mod-cm6 .cm-content > * {
    margin: auto auto !important;
}

From Discord.