lecture.studio

Center an image or text in Marp: three ways that work

By Ekrem Çetinkaya · Published

Marp has no center keyword for images, so centering is CSS: one rule in the theme (img[alt~="center"] { display: block; margin: 0 auto; }) makes ![center w:500](fig.png) work in every deck; for text, <!-- _class: lead --> centers a whole slide in the built-in themes, and a scoped section { text-align: center; } centers one slide's text. Vertical centering is justify-content: center on the section.

This guide gives the CSS for each case, explains why the alt-text trick works, and shows the one layout (image beside text) where centering is the wrong tool.

Center an image

Add to the theme, or to the deck's style: block:

img[alt~="center"] { display: block; margin: 0 auto; }

Then:

![center w:600](assets/figure.png)

Marp keeps the alt text's keywords in the rendered alt attribute, so the CSS attribute selector [alt~="center"] matches an alt that contains the word center. Any word works; center is the convention. The image becomes a block and the auto margins center it.

For a right-aligned image, the same trick: img[alt~="right"] { display: block; margin-left: auto; }.

Center text on one slide

<!-- _class: lead -->

# The one claim of this section

The built-in themes define lead as a centered slide (text and vertical position). If your theme does not, define it:

section.lead { justify-content: center; text-align: center; }
section.lead h1, section.lead h2, section.lead p { text-align: center; }

For a single slide without a class:

<style scoped>
section { text-align: center; justify-content: center; }
</style>

Vertical centering

Slides are flex columns. justify-content: center on section centers the content vertically; flex-start pins it to the top, which is what lecture decks usually want so that slides with different amounts of content line up. Set the deck-wide value in the theme and use lead or a scoped style for the exceptions.

Center a table

Tables are blocks that size to their content, so:

section table { margin-left: auto; margin-right: auto; }

centers every table; a .center class on a wrapping div does it for one.

When not to center

An image beside bullets is not a centering problem; it is a split:

![bg right:45%](assets/diagram.png)

- point
- point

And a figure with a caption is a block with a small line under it, left-aligned like the rest of the slide, with the source; centering it makes the caption float. Reserve centering for title slides, section dividers, and a single figure that is the whole slide.

In the online editor

The Marp online editor renders the alt trick and scoped styles as marp-cli does, so the CSS above can be tested in a minute; the theme builder writes the lead and divider classes into a theme for you.

FAQ

How do I center an image in Marp?

Add img[alt~="center"] { display: block; margin: 0 auto; } to the theme or style: block and write ![center w:500](img.png).

How do I center text on a Marp slide?

<!-- _class: lead --> on the slide (built-in themes), or <style scoped>section { text-align: center; justify-content: center; }</style>.

How do I vertically center a Marp slide?

justify-content: center on section, via a class, a scoped style, or the theme.

Is there a Marp directive to center images?

No. The alt-text rule above is the usual approach and works in marp-cli, VS Code and this site's editor.

More guides