October 22, 2021 in Jekyll1 minute
Jekyll image shortcode does not have an option for aligining the image to left, right, or centre. This makes formatting paragraphs with images unwieldy.
Thankfully, many markdown commands let you to add ’extra’ processors to support options for the commands. Here is an alternative that used the ALT tag and a CSS selector on the alt tag… Instead, add a URL hash like this:
Here is the Markdown image code:


Note the added URL hash #center.
Now add this rule in CSS using CSS 3 attribute selectors to select images with a certain path.
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}You should be able to use a URL hash like this almost like defining a class name and it isn’t a misuse of the ALT tag like some people had commented about for that solution. It also won’t require any additional extensions. Do one for float right and left as well or any other styles you might want.
Thanks: Stack Overflow