How to Center an Image in Markdown
From time to time, we want to align the image center within the Jekyll post. But applying CSS style directly into the markdown file with HTML tag is cumbersome and not pretty. And I’m not the only one searching for the way! In this article, I’ll guide you through an easy solution to center an image within Jekyll’s blog post.
Kramdown
If you look at Jekyll’s official doc, Jekyll uses Kramdown with GFM preprocessor. The good thing about Kramdown is that it gives you an extra option to modify the markdown file. Check Kramdown Quick Reference or my posting tip post. As you may have found it, Kramdown supports inline attributes!
Using Kramdown Inline Attributes
The syntax for the inline attribute is very easy. Add whatever you want to the {: } syntax as below.
This is *red*{:style="color: red"}.
Create CSS Classes
You can also add CSS Class to the element. the syntax is {:.class-name}. I have created two class for the image alignment. Append below code to the _sass/my-style.scss
/* file: "/_sass/my-style.scss" */
// Image centering
.text-align-center {
text-align: center;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
There is also a way to do it without class. And I’ll post both ways, so please skip the part if you don’t want CSS class.
Centering One Image
If you have installed CSS Class as above, you may choose to use the first markdown example. If not, go with the second option. Either way, the outcome is the same. And if you wish to apply a one-time attribute to the element, say adjusting width or height of the image, it won’t hurt to know the second option.
Example:
Markdown:
* With CSS class installed
{:.centered}
* Pure inline attribute used
{:style="display:block; margin-left:auto; margin-right:auto"}
Centering Multiple Image
Example:
Markdown:
* With CSS class installed
{:.text-align-center}
* Pure inline attribute used
{:style="text-align:center;"}
Center All Images by Default
If you want all images to be centered by default, append below CSS code to the _sass/my-style.scss. But it may have unexpected side effects. I have not tested it for a long time.
/* file: "/_sass/my-style.scss" */
img {
display: block;
margin-left: auto;
margin-right: auto;
}
Back to How I customized Hydejack Theme
