# Image alignments

**URL:** <https://talk.commonmark.org/t/image-alignments/932>\
**Category:** Extensions\
**Created:** [November 29, 2014, 7:22pm UTC](https://talk.commonmark.org/t/image-alignments/932 "2014-11-29T19:22:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![aleemb](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/aleemb/32/530_2.png) [@aleemb](https://talk.commonmark.org/u/aleemb)\
**Post date:** [November 29, 2014, 7:22pm UTC](https://talk.commonmark.org/t/image-alignments/932/1 "2014-11-29T19:22:28Z")

</div>

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:

```auto
[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.

---

<div class="post-metadata">

**Author:** ![mofosyne](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/mofosyne/32/1438_2.png) [@mofosyne](https://talk.commonmark.org/u/mofosyne)\
**Post date:** [November 30, 2014, 12:40am UTC](https://talk.commonmark.org/t/image-alignments/932/2 "2014-11-30T00:40:08Z")

</div>

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 }
```

---

<div class="post-metadata">

**Author:** ![zzzzBov](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/zzzzbov/32/218_2.png) [@zzzzBov](https://talk.commonmark.org/u/zzzzBov)\
**Post date:** [November 30, 2014, 5:37pm UTC](https://talk.commonmark.org/t/image-alignments/932/3 "2014-11-30T17:37:46Z")

</div>

[I’ve been using the fragment identifier and attribute selectors to style images in markdown](http://zzzzbov.com/blag/classy-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.

---

<div class="post-metadata">

**Author:** ![chrisalley](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/chrisalley/32/906_2.png) [@chrisalley](https://talk.commonmark.org/u/chrisalley)\
**Post date:** [November 30, 2014, 9:11pm UTC](https://talk.commonmark.org/t/image-alignments/932/4 "2014-11-30T21:11:51Z")

</div>

Image alignments have been discussed in the [floating images](http://talk.commonmark.org/t/floating-images/266) topic.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/codinghorror/32/2_2.png) [@codinghorror](https://talk.commonmark.org/u/codinghorror)\
**Post date:** [December 2, 2014, 1:15am UTC](https://talk.commonmark.org/t/image-alignments/932/5 "2014-12-02T01:15:26Z")

</div>

I moved 3 posts to an existing topic: [Floating images](http://talk.commonmark.org/t/floating-images/266)

---

<div class="post-metadata">

**Author:** ![codinghorror](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/codinghorror/32/2_2.png) [@codinghorror](https://talk.commonmark.org/u/codinghorror)\
**Post date:** [December 2, 2014, 1:15am UTC](https://talk.commonmark.org/t/image-alignments/932/6 "2014-12-02T01:15:34Z")

</div>