Image alignments

Floating images left/right in an article is no doubt a very common use-case and one I have extended my internal implementation to accommodate. I find the most usable approach that has worked has been to pad the image caption with spaces:

[I am not float](
[ I am right floated](
[I am left floated ](
[ I am centered ](

I could not find a more intuitive and less intrusive way of aligning images. The other proposed ideas I have seen seem unwieldy. This particular solution also doesn’t get in the way of pure text readability.

1 Like

The recommended approach that will hopefully be implemented soon is to use css styling. It’s more obvious that way.

Generic attribute syntax.

[I am not float]({ .right }
1 Like

I’ve been using the fragment identifier and attribute selectors to style images in markdown. It’s worked pretty well so far when I just need to style an image.

Basically, the image is authored as:

![alt text](/path/to/image.png)
![alt text](/path/to/image.png#center)
![alt text](/path/to/image.png#right)

and the styles are written along the lines of:

img[src*="#center"] {
    display: block;
    margin: 0 auto;
img[src*="#right"] {
    float: right;

If you’re trying to do something fancier, I recommend making use of raw HTML with the <figure> and <figcaption> elements.

Image alignments have been discussed in the floating images topic.

I moved 3 posts to an existing topic: Floating images