1

I am writing an article in stackedit markdown editor. How do I center my uploaded image in my document?

Moreover, how do I control my text alignment, not just images? I read some of other's questions in the forum but I am afraid the answers given don't work on this particular editor.

E Be
  • 167
  • 1
  • 2
  • 8

2 Answers2

2

It's true that stackedit.io does not seem to support alignment, natively, as part of the markdown. It also looks like any style attribute seems to get scrubbed out when being displayed, so float: left and float: right won't work. There seem to be some workarounds though.

You basically have to choose between using deprecated tags/attributes, or using classes defined by stackedit.io. It's not guaranteed that these classes won't be changed, in the future, though most of them are so standard that it's unlikely they would be.

Left and Right Aligned Images

As @imran-ali mentioned, you can use an img align tag:

<img align="left" src="https://www.gravatar.com/avatar/a6596d9955d2df59402c150f699bc8b8?s=32&d=identicon&r=PG&f=1" style="float:right"></img> Some text which should appear to the right of the image.

However, like the <center> tag, the align attributes have been deprecated in HTML5, and you should probably avoid using them.

You can also try to piggy-back off of some of the styles their markdown uses, since the class attribute doesn't seem to get scrubbed.

<img class="pull-left" src="https://www.gravatar.com/avatar/a6596d9955d2df59402c150f699bc8b8?s=32&d=identicon&r=PG&f=1" style="float:right"></img> Some text which should appear to the right of the image.

If you want to align the image to the right, just swap align="left" or class="pull-left" with align="right" or class="pull-right".

NOTE:

  • The image still comes before the text, even if you want to align it to the right.
  • The image needs to be on the same line as the text, in the markdown editor...otherwise it will put a line break between the image and the text.

Centered Images

The only two ways to do this, that I can figure out, aren't ideal. Again, you can piggy-back off of stackedit.io display css (the center-block class):

<img class="center-block" src="https://www.gravatar.com/avatar/a6596d9955d2df59402c150f699bc8b8?s=32&d=identicon&r=PG&f=1"></img>

Or you can use the <center> tag, which, as previously mention, has been deprecated.

TheMadDeveloper
  • 1,587
  • 15
  • 28
  • Also, when you align images to the left or right, they are likely going to be flushed against the text, which probably not ideal. I was perusing the stackedit.io css (https://stackedit.io/res-min/themes/default.css) and, if you wanted to, you could probably add a `btn` or `btn-sm` class to give an image some padding. This would probably be more prone to breaking in the future, though, since this is not what those classes were intended for. – TheMadDeveloper Jun 19 '16 at 05:57
1

As described in related SO Question

native markdown does not support text alignment without html and css.

Here is what I have tried and it works perfectly on StackEdit

<p style="text-align: center;">
Para centered
</p>
<p style="text-align: left;">
Para left
</p>
<p style="text-align: right;">
Para right
</p>

For image alignment I have tested both right and left alignment with img tag as following: 

<img style="float: right;" src="whatever.jpg"> </img>
<img style="float: left;" src="whatever.jpg"> </img>

both of them work perfectly, but style = "float: center;" does not work

Community
  • 1
  • 1
Imran Ali
  • 2,223
  • 2
  • 28
  • 41
  • 1
    align attribute with values left and right also works e.g. `` or `` – Imran Ali Jun 17 '16 at 01:38
  • I am afraid your solution doesn't seem to work for me. Looking at the related question you linked to, the formatting
    Text or image
    , does work.     – E Be Jun 17 '16 at 09:54
  • Have you tried the snippet I have provided? I have tested them on [stackedit](https://stackedit.io) and both of them work. As far as `
    `tag is concerned it is not supported in `HTML5` therefore we have to use `css` instead.
     – Imran Ali Jun 18 '16 at 15:36