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 useyour-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:


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>

</div>
<div>

</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:


Working Example
Check out this exemplary repository to see the styles listed above in action:
https://github.com/m1rm/marp-skeleton