Marp: Advanced Image Positioning

If you are new to Marp, check out this article that covers the basics: Marp: Create Presentations using Markdown

TL;DR

you need to use a theme stylsheet (theme.css)
you can write regular css like you know it
use img[alt~="your-alias"] {...css} to be able to use your-alias to apply the styling on images the same as you use - for example - the image filters provided by Marp out of the box

Align images left or right

CSS:

img[alt~="align-right"] {
    float: right;
}

img[alt~="align-left"] {
    float: left;
}

Usage:

![w:500 align-left](image.png)

![w:500 align-right](image.png)

Display images side by side

CSS:

/* use on containing element to display images side by side */
.inline-images {
    display: flex;
    height: 80%; /* control location on y-axis */
    justify-content: space-evenly;
    align-items: center;
}

Usage:

<div class="inline-images">

<div>

![w:500](image.png)

</div>

<div>

![w:500](image.png)

</div>

</div>

Align images to the top and bottom of a slide

CSS:

img[alt~="align-bottom-centered"] {
    position: absolute;
    bottom: 0;
    left: 50%; /* centering */
    transform: translateX(-50%); /* centering */
    margin: 0; /* control space to bottom end of slide */
}

img[alt~="align-top-centered"] {
    position: absolute;
    top: 0;
    left: 50%; /* centering */
    transform: translateX(-50%); /* centering */
    margin: 0;  /* control space to top end of slide */
}

Usage:

![w:500 align-top-centered](image.png)

![w:500 align-bottom-centered](image.png)

Working Example

Check out this exemplary repository to see the styles listed above in action:
GitHub Octocat Mark - Black GitHub Octocat Mark - White https://github.com/m1rm/marp-skeleton