Centering Images with Jekyll and Markdown

• Updated March 8, 2018

There are a handful of ways to center an image on a web page. The simplest method is to create a CSS class with the margin and display properties and apply that class to the image link.

However, when I write a post I’m writing it in Markdown, and I don’t want to embed any sort of HTML or CSS in it. I want to keep the post free of markup and formatting instructions. But this is one of those situations where I need some sort of mechanism to apply a CSS class to an image. There had to be a simple way to do this without marking up the post with too many tags.

I found gerwitz’s comment in a Markdown and image alignment thread on Stackoverflow. Of all the other possible solutions I found, this one was the cleanest and least obtrusive.

This particular feature, called Attribute List Definitions, is an extension of standard Markdown and has been implemented in kramdown (it was first implemented in Maruku).

In your Markdown file, simply append the following syntax containing the CSS class you want to apply to the image link (in this example the CSS class is .center-image):

{: .center-image }

So, the entire image link would look like the following in your Markdown file:

![Picture description](/link/to/picture.jpg){: .center-image }

If you need to apply multiple CSS classes, simply add more classes delimited by a space:

![Picture text](/link/to/picture.jpg){: .center-image .example-class1 .example-class2 }

Then, somewhere in your style sheets, you will need the following CSS class to actually center the image:

    margin: 0 auto;
    display: block;

After you run jekyll build and view the generated website, images should be centered on the web page with CSS class center-image applied.

If you found this post useful and would like to help support this site - and get something for yourself - sign up for any of the services listed below through the provided affiliate links. I will receive a referral payment from any of the services you sign-up for.

Get faster shipping and more with Amazon Prime: About to order something from Amazon but want to get more value out of the money you would normally pay for shipping? Sign-up for a free 30-day trial of Amazon Prime to get free two-day shipping, access to thousands of movies and TV shows, and more.

Thanks for reading and take care.