How this blog centers images

Here is a common question that has almost an infinite number of answers: How do I center an image in Markdown?

The solution (for this blog, at least) comes in two parts: CSS and Markdown Attributes.

CSS Classes

We skip over any embedded HTML shenanigans and go for the CSS option. There, we define two new CSS classes. One will handle images and another one to handle text:

.center-image
{
    margin: 0 auto;
    display: block;
}

.center-text
{
    text-align: center;
}

We write them in the site's custom.css file (extra/css/custom.css) and we inject that into the current theme via its CSS_OVERRIDE setting:

CSS_OVERRIDE = 'extra/css/custom.css'

This configuration expose the CSS class names for the Markdown parser to later manipulate.

Attributes

With the classes defined, we link them to the Markdown element via attributes. Attributes are a non-standard feature, provided by Python Markdown's attr_list extension, that makes CSS attributes accessible in Markdown syntax. Without attributes, we would have to resort to embedding raw HTML in the Markdown files. But with them, we have a cleaner syntax to add HTML style and class names to the Markdown content.

Installation

We first install the Python package into Pelican's Python environment:

pip install markdown

Configuration

And then we enable it in the pelicanconf.py file, in the MARKDOWN variable:

# Extra configuration settings for the Markdown processor.
MARKDOWN = {
    "extension_configs": {
        ....
         "markdown.extensions.attr_list": {},
        ....
    },
    'output_format': 'html5'
}

The extension is also bundled with the extra extension, so enabling that extension will have the same effect -- but watch out for the conflict if you're also going to use PyMdown Extensions' own version of extra.

No Attributes

The vanilla version of our content consists of a simple image and paragraph:

![pelican-logo]

This is a logo.

[pelican-logo]: https://raw.githubusercontent.com/getpelican/pelican-blog/main/content/logo/pelican-logo-small.png

And that renders out as this:

This is a logo.

Centered Attributes

We now update the content with our image and text attributes:

![pelican-logo]{: .center-image}

This is a logo.
{: .center-text}

[pelican-logo]: https://raw.githubusercontent.com/getpelican/pelican-blog/main/content/logo/pelican-logo-small.png

Note: The {: .center-text} attribute goes at the end of the element because the text paragraph is a block level element. More information is available from the official Python-Markdown help.

The above renders out as this:

This is a logo.