# Add markup to control alignment of images and text

**URL:** <https://meta.discourse.org/t/add-markup-to-control-alignment-of-images-and-text/15287>\
**Category:** Feature\
**Created:** [2014年五月3日 19:14 UTC](https://meta.discourse.org/t/add-markup-to-control-alignment-of-images-and-text/15287 "2014-05-03T19:14:14Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![NomNuggetNom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nomnuggetnom/32/122685_2.png) [@NomNuggetNom](https://meta.discourse.org/u/NomNuggetNom)\
**Post date:** [2014年五月3日 19:14 UTC](https://meta.discourse.org/t/add-markup-to-control-alignment-of-images-and-text/15287/1 "2014-05-03T19:14:14Z")

</div>

This image should explain it all

 ![](https://global.discourse-cdn.com/meta/original/2X/4/41a80b42cc53a71f3abd1943af10c2699f212a8e.png)

* * *

Here is the code (this actually pastes differently here, but the same thing happens with the text)

```
[img]https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/32/info.png[/img] Information
----

```

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2014年五月3日 21:38 UTC](https://meta.discourse.org/t/add-markup-to-control-alignment-of-images-and-text/15287/2 "2014-05-03T21:38:00Z")

</div>

I don’t understand what you are talking about? That (i) glyph appears nowhere in Discourse?

Oh you expect images to line up with the text. No, that is not supported. Sorry. If you size the image “just right” it might though.

---

<div class="post-metadata">

**Author:** ![NomNuggetNom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nomnuggetnom/32/122685_2.png) [@NomNuggetNom](https://meta.discourse.org/u/NomNuggetNom)\
**Post date:** [2014年五月3日 22:01 UTC](https://meta.discourse.org/t/add-markup-to-control-alignment-of-images-and-text/15287/3 "2014-05-03T22:01:29Z")

</div>

Why is it not supported? Obviously I can resize images to make it work, but that is a tremendous amount of work in the long run.

---

<div class="post-metadata">

**Author:** ![elberet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/elberet/32/122404_2.png) [@elberet](https://meta.discourse.org/u/elberet)\
**Post date:** [2014年五月3日 22:12 UTC](https://meta.discourse.org/t/add-markup-to-control-alignment-of-images-and-text/15287/4 "2014-05-03T22:12:19Z")

</div>

Your example is flawed. If the text includes a character that goes below the baseline (such as `g` or `y`), you would find that the text and image actually are vertically centered, like so:

![](https://global.discourse-cdn.com/meta/original/2X/a/a2dbbdc8ab324a0e46278bc3737525d0064612d0.png)

---

<div class="post-metadata">

**Author:** ![NomNuggetNom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nomnuggetnom/32/122685_2.png) [@NomNuggetNom](https://meta.discourse.org/u/NomNuggetNom)\
**Post date:** [2014年五月3日 22:36 UTC](https://meta.discourse.org/t/add-markup-to-control-alignment-of-images-and-text/15287/5 "2014-05-03T22:36:11Z")

</div>

Interesting discovery. Unfortunately that would be useless most of the time :\

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2014年五月3日 22:38 UTC](https://meta.discourse.org/t/add-markup-to-control-alignment-of-images-and-text/15287/6 "2014-05-03T22:38:10Z")

</div>

The intent of the editor markup (Markdown, primarily, with some fallback support for BBCode) is not to be a comprehensive, PDF or TeX like layout engine with really precise control over exactly how things display.

It’s more like a Wikipedia article kind of formatting.

---

<div class="post-metadata">

**Author:** ![Lee\_Ars](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lee_ars/32/1597_2.png) [@Lee\_Ars](https://meta.discourse.org/u/Lee_Ars)\
**Post date:** [2014年五月3日 22:38 UTC](https://meta.discourse.org/t/add-markup-to-control-alignment-of-images-and-text/15287/7 "2014-05-03T22:38:26Z")

</div>

Where _exactly_ are you seeing problem behavior? Your “this image should explain it all” post doesn’t explain where you’re encountering issues. Is this a problem you’re seeing when inlining images in posts, or with badging on the topic lists, or…what?

---

<div class="post-metadata">

**Author:** ![NomNuggetNom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nomnuggetnom/32/122685_2.png) [@NomNuggetNom](https://meta.discourse.org/u/NomNuggetNom)\
**Post date:** [2014年五月3日 22:40 UTC](https://meta.discourse.org/t/add-markup-to-control-alignment-of-images-and-text/15287/8 "2014-05-03T22:40:16Z")

</div>

> [@codinghorror](#):
>
> The intent of the editor markup (Markdown, primarily, with some fallback support for BBCode) is not to be a comprehensive, PDF or TeX like layout engine with really precise control over exactly how things display.
> 
> It’s more like a Wikipedia article kind of formatting.

Then why is it being used for a forum system? 😞. It’s really frustrating how limited Discourse is at large. Less choice is never a good thing. Like lack of tables because “they aren’t needed.”

> [@Lee\_Ars](#):
>
> Where exactly are you seeing problem behavior? Your “this image should explain it all” post doesn’t explain where you’re encountering issues. Is this a problem you’re seeing when inlining images in posts, or with badging on the topic lists, or…what?

I’m creating headers for threads. It’s in a thread. Unfortunately I couldn’t post it to show you, because of the image restrictions on new users.

---

<div class="post-metadata">

**Author:** ![Lee\_Ars](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lee_ars/32/1597_2.png) [@Lee\_Ars](https://meta.discourse.org/u/Lee_Ars)\
**Post date:** [2014年五月3日 22:45 UTC](https://meta.discourse.org/t/add-markup-to-control-alignment-of-images-and-text/15287/9 "2014-05-03T22:45:23Z")

</div>

> [@NomNuggetNom](#):
>
> I’m creating headers for threads.

In that case, you might have better luck picking out the ID or class of the header text and adding some padding to it. The only problem is that as @elberet noted, words containing glyphs with both descenders and ascenders will then be mis-aligned.

This isn’t a Discourse problem so much as it is an HTML rendering problem.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2014年五月3日 22:47 UTC](https://meta.discourse.org/t/add-markup-to-control-alignment-of-images-and-text/15287/10 "2014-05-03T22:47:09Z")

</div>

> [@NomNuggetNom](#):
>
> It’s really frustrating how limited Discourse is at large. Less choice is never a good thing

That’s an awfully broad generalization based on “I want TeX / PDF like layout control over image alignment in posts”.

However, if you are building a theme for Discourse, as @Lee_Ars pointed out you can use whatever HTML you want.

---

<div class="post-metadata">

**Author:** ![NomNuggetNom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nomnuggetnom/32/122685_2.png) [@NomNuggetNom](https://meta.discourse.org/u/NomNuggetNom)\
**Post date:** [2014年五月3日 22:49 UTC](https://meta.discourse.org/t/add-markup-to-control-alignment-of-images-and-text/15287/11 "2014-05-03T22:49:12Z")

</div>

> [@codinghorror](#):
>
> That’s an awfully broad generalization based on “I want TeX / PDF like layout control over image alignment in posts”.

Yes, the alignment of images and such is too much to ask, to be sure. I didn’t understand that it wasn’t purely the fault of HTML. I was referring more to things like: no tables, no underline, no ability to remove click counters, etc. I know two of those are problems with vanilla markdown, but still. BBcode has them.

---

<div class="post-metadata">

**Author:** ![elberet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/elberet/32/122404_2.png) [@elberet](https://meta.discourse.org/u/elberet)\
**Post date:** [2014年五月3日 23:12 UTC](https://meta.discourse.org/t/add-markup-to-control-alignment-of-images-and-text/15287/12 "2014-05-03T23:12:23Z")

</div>

Supporting tables and automagically detecting baseline alignment in inline pictures are of vastly different scope… and while the latter would be completely out of place in a discussion forum, having tables sure would be nice, tho. 😏

Too bad I suck with JavaScript.

> [@codinghorror](#):
>
> However, we do plan to have a robust plugin infrastructure, so if someone wants to create the Discourse Super Mega Hyper Tables Composer Plugin.. go for it.

---

<div class="post-metadata">

**Author:** ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)\
**Post date:** [2025年十二月4日 11:14 UTC](https://meta.discourse.org/t/add-markup-to-control-alignment-of-images-and-text/15287/13 "2025-12-04T11:14:22Z")

</div>


