# 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:** 1\
**Showing post:** 20

<div class="post-metadata">

**Author:** ![tophee](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tophee/32/73406_2.png) [@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")

</div>

> [@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):

> <https://github.com/discourse/Discourse-Tiles-image-gallery/blob/ae11e1b19d72eb71194cb02cf833fb8a0eeb18fa/common/head_tag.html#L41-L59>

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?

---

_[View the full topic](https://meta.discourse.org/t/image-alignment/15408)._