将图像居中 stackedit.io

Question

我正在用 stackedit markdown 编辑器写一篇文章。如何在我的文档中将我上传的图片居中？

此外，我如何控制我的文本对齐方式，而不仅仅是图像？我在论坛中阅读了其他人的一些问题，但恐怕给出的答案不适用于这个特定的编辑器。

Answer 1

如相关描述SO Question

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

这是我尝试过的方法，它在 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>

对于图像对齐，我已经使用 img 标签测试了左右对齐，如下所示：

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

两者都很好用，但是style = "float: center;"不行

Answer 2

的确，stackedit.io 本身似乎不支持对齐作为降价的一部分。看起来任何 style 属性在显示时似乎都被擦掉了，因此 float: left 和 float: right 将不起作用。不过似乎有一些解决方法。

您基本上必须在使用已弃用的 tags/attributes 或使用 stackedit.io 定义的 class 之间做出选择。不能保证这些 classes 将来不会被改变，尽管它们中的大多数都是标准的，所以它们不太可能被改变。

左右对齐图像

如@imran-ali 所述，您可以使用 img align 标签：

<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.

但是，与 <center> 标签一样，align 属性在 HTML5 中已被弃用，您应该避免使用它们。

您也可以尝试借鉴他们的降价使用的一些样式，因为 class 属性似乎没有被擦除。

<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.

如果您想将图像右对齐，只需将 align="left" 或 class="pull-left" 替换为 align="right" 或 class="pull-right"。

注意：

即使您想将其右对齐，图像仍位于文本之前。
图片需要和文字在同一行，在markdown编辑器中...否则会在图片和文字之间换行。

居中图像

我能想到的唯一两种方法并不理想。同样，您可以利用 stackedit.io 显示 css（center-block class）：

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

或者您可以使用 <center> 标签，如前所述，该标签已被弃用。

将图像居中 stackedit.io

Center an image in stackedit.io

markdown

center