# Image Alignment
**URL:** https://meta.discourse.org/t/image-alignment/15408
**Category:** Feature
**Created:** [May 7, 2014, 5:56pm UTC](https://meta.discourse.org/t/image-alignment/15408 "2014-05-07T17:56:14Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@itlo](https://meta.discourse.org/u/itlo)
#### Post date: [May 7, 2014, 5:56pm UTC](https://meta.discourse.org/t/image-alignment/15408/1 "2014-05-07T17:56:14Z")
Any plan to add a feature for Image Alignment and Wrapping Text Around Images? More formmating options for photos (uploaded or linked) would be very useful. Cheers.
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [June 8, 2018, 8:00pm UTC](https://meta.discourse.org/t/image-alignment/15408/18 "2018-06-08T20:00:17Z")
This question comes up all the time in my community. We’d love to be able to include a small image or two in our posts without interrupting the flow of text.
Here’s a typical example..
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 9, 2018, 5:38am UTC](https://meta.discourse.org/t/image-alignment/15408/19 "2018-06-09T05:38:22Z")
You don’t need a plugin to whitelist classes anymore, you can just use `data-theme-*` attributes directly in your post’s markup.
You’d do something like
```HTML
```
and then in your site customizations you’d have add corresponding CSS
```CSS
[data-theme-image="left"] {
float: left;
img {
margin: 1.3em 1em 0 0;
}
}
```
Might be a good case for a simple theme component.
---
### Author:  [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [June 9, 2018, 8:36am UTC](https://meta.discourse.org/t/image-alignment/15408/20 "2018-06-09T08:36:27Z")
> [@awesomerobot](#):
>
> img[data-theme-image=“left”] { float: left; margin-right: 1em; }
I had to look this one up. In case anyone else is wondering how this works, here you go:
> **[Attribute selectors - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Attribute_selectors)**
>
> The CSS attribute selector matches elements based on the element having a given attribute explicitly set, with options for defining an attribute value or substring value match.
> [@awesomerobot](#):
>
> Might be a good case for a simple theme component.
So let’s see if I understand how this would work. One way would be to add a toolbar button that would add a `div` with the `data-theme-image` attribute, just like here (where a different attribute is added):
>
Right?
Now, if I think that adding a toolbar button each for aligning images, say, left right centre (or even adding a toolbar button at all) and I instead want to manually add a `[floatl]` tag which would then be converted into html, then I would need a plugin, right?
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [June 10, 2018, 12:06am UTC](https://meta.discourse.org/t/image-alignment/15408/23 "2018-06-10T00:06:08Z")
I’ve done a plugin with some formatting options, center, align right, float element, color. You can activate/deactivate any option
> [@Formatting toolbar](https://meta.discourse.org/t/formatting-toolbar/40649):
>
> Add some formatting options to your discourse posts : center a text or an image, align to the right, justify, colors, underline, etc. It’s easy to use and it will provide some options to embellish your posts.
It’s using bbcodes tho, it may not be as clean as other options
---
### Author:  [@oreillyc](https://meta.discourse.org/u/oreillyc)
#### Post date: [March 14, 2021, 3:41pm UTC](https://meta.discourse.org/t/image-alignment/15408/31 "2021-03-14T15:41:52Z")
The formatting toolbar [did the trick](https://forums.sociocracyforall.org/t/exponential-organizations-book-discussion/28) ez-pz for me! Thanks @Steven
> [@Formatting toolbar](https://meta.discourse.org/t/formatting-toolbar/40649):
>
> Add some formatting options to your discourse posts : center a text or an image, align to the right, justify, colors, underline, etc. It’s easy to use and it will provide some options to embellish your posts.
> **Float right bbcode**
>
> We have a floatl bbcode (and button) that allows you to add a content on the left of your text (like the [image in this example](https://raw.githubusercontent.com/iunctis/discourse-formatting-toolbar/master/formatting.png)). There is also a `[floatr][/floatr]` bbcode, that adds a content on the right. The bbcode has been created but I didn’t add a button, it doesn’t feel necessary.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [April 5, 2021, 8:04pm UTC](https://meta.discourse.org/t/image-alignment/15408/33 "2021-04-05T20:04:01Z")
I went ahead and cleaned up this topic a bit so that the most relevant information is highlighted.
Below is a summary of the current options for allowing image alignment in posts, ordered by ease of installation/use:
- [MD Composer extras](https://meta.discourse.org/t/md-composer-extras/118912) (theme component)
- [Formatting toolbar](https://meta.discourse.org/t/formatting-toolbar/40649) (plugin)
- Build your own solution: [Image Alignment - #19 by awesomerobot](https://meta.discourse.org/t/image-alignment/15408/19) and if you want to add a toolbar button, there is an example in [Image Alignment - #20 by tophee](https://meta.discourse.org/t/image-alignment/15408/20)
---
### Author:  [@krauss](https://meta.discourse.org/u/krauss)
#### Post date: [May 22, 2021, 2:08pm UTC](https://meta.discourse.org/t/image-alignment/15408/34 "2021-05-22T14:08:25Z")
Some news here? **I am an user** , I **only need to post a content with image-align-right**.
---
### Author:  [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [May 22, 2021, 9:45pm UTC](https://meta.discourse.org/t/image-alignment/15408/35 "2021-05-22T21:45:40Z")
See [What is the code for centering an uploaded image? - #14 by jomaxro](https://meta.discourse.org/t/what-is-the-code-for-centering-an-uploaded-image/77446/14). Instead of `center`, use `right`.
---
### Author:  [@mattdm](https://meta.discourse.org/u/mattdm)
#### Post date: [November 2, 2021, 3:12pm UTC](https://meta.discourse.org/t/image-alignment/15408/36 "2021-11-02T15:12:45Z")
> [@jomaxro](#):
>
> See [What is the code for centering an uploaded image? - #14 by jomaxro](https://meta.discourse.org/t/what-is-the-code-for-centering-an-uploaded-image/77446/14). Instead of `center` , use `right` .
That can right-align the image, but won’t float it, right? That is, no wrapped text, which is _probably_ what’s wanted?
---
### Author:  [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [November 2, 2021, 6:16pm UTC](https://meta.discourse.org/t/image-alignment/15408/37 "2021-11-02T18:16:06Z")
> [@mattdm](#):
>
> That can right-align the image, but won’t float it, right?
That is correct. The topic I linked to wanted to center an image, and that’s all it does. If you also want `float` you’ll need to follow [Kris’s suggestion](https://meta.discourse.org/t/image-alignment/15408/19) (which requires that action be taken by an admin to get it set up) or install a plugin like the Formatting toolbar.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [November 2, 2021, 7:31pm UTC](https://meta.discourse.org/t/image-alignment/15408/38 "2021-11-02T19:31:08Z")
Just noting that floating is also supported with the [MD Composer extras](https://meta.discourse.org/t/md-composer-extras/118912) component. It will add a button to the composer that might make things a little smoother.
