Центрирование изображения в stackedit.io

Question

Я пишу статью в редакторе уценки. Как центрировать загруженное изображение в моем документе?

Кроме того, как я могу контролировать выравнивание текста, а не только изображения? Я прочитал некоторые другие вопросы на форуме, но боюсь, что приведенные ответы не работают на этом конкретном редакторе.

Answer 1

Это правда, что stackedit.io изначально не поддерживает выравнивание как часть уценки. Это также выглядит как любой style Атрибут, кажется, удаляется при отображении, поэтому float: left а также float: right не сработает Кажется, что есть некоторые обходные пути.

Вы в основном должны выбирать между использованием устаревших тегов / атрибутов или использованием классов, определенных stackedit.io. Не гарантируется, что эти классы не будут изменены в будущем, хотя большинство из них настолько стандартны, что вряд ли они будут.

Выровненные изображения слева и справа

Как уже упоминалось @imran-ali, вы можете использовать imgalign тег:

<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",

НОТА:

• Изображение по-прежнему стоит перед текстом, даже если вы хотите выровнять его по правому краю.
• Изображение должно находиться на той же строке, что и текст, в редакторе уценки... в противном случае он вставит разрыв строки между изображением и текстом.

Центрированные изображения

Единственные два способа сделать это, которые я могу понять, не идеальны. Опять же, вы можете отменить отображение stackedit.io css (класс центральных блоков):

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

Или вы можете использовать <center> тег, который, как упоминалось ранее, является устаревшим.

Answer 2

Как описано в соответствующем вопросе

Нативная разметка не поддерживает выравнивание текста без HTML и 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;" не работает