Image alignments

[aleemb]

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](http://foo.com/bar.png)
[ I am right floated](http://foo.com/bar.png)
[I am left floated ](http://foo.com/bar.png)
[ I am centered ](http://foo.com/bar.png)

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.

[mofosyne]

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](http://foo.com/bar.png){ .right }

[zzzzBov]

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.

[chrisalley]

Image alignments have been discussed in the floating images topic.