Изображение в формате github README.md

Ответ 1

Я смотрел на синтаксис уценки, используемый в github [...], я не могу понять, как центрировать изображение

TL; DR

Нет, вы не можете, полагаясь только на синтаксис Markdown. Markdown не заботится о позиционировании.

Примечание. Некоторые процессоры уценки поддерживают включение HTML (как справедливо указано @waldyr.ar), и в случае GitHub вы можете использовать что-то вроде <div style="text-align:center"><img src="..."/></div>. Помните, что нет никакой гарантии, что изображение будет отцентрировано, если ваш репозиторий разветвляется в другой среде размещения (Codeplex, BitBucket,...) или если документ не читается через браузер (предварительный предварительный просмотр текста Markdown, MarkdownPad, VisualStudio Web Предварительный обзор уценки Essentials,...).

Примечание 2: Имейте в виду, что даже на веб-сайте GitHub способ визуализации уценки неодинаков. Вики, например, не допустит такого позиционного обмана css.

Неограниченная версия

Синтаксис Markdown не дает возможности контролировать положение изображения.

Фактически, было бы граничить с философией Markdown, чтобы разрешить такое форматирование, как указано в разделе "Философия"

"Документ в формате Markdown должен быть опубликован как есть, в виде обычного текста, не выглядя так, как если бы он был размечен тегами или инструкциями по форматированию".

Файлы разметки предоставляются сайтом github.com с помощью библиотеки Ruby Redcarpet.

Redcarpet предоставляет некоторые расширения (например, зачеркивание), которые не являются частью стандартного синтаксиса Markdown и предоставляют дополнительные "функции". Однако никакое поддерживаемое расширение не позволяет вам центрировать изображение.

Ответ 2

Это от поддержки Github:

Эй, Вальдир,

Markdown не позволяет напрямую настроить выравнивание (см. здесь docs: http://daringfireball.net/projects/markdown/syntax#img), но вы можете просто использовать необработанный HTML-код 'img' и выполнить выравнивание с встроенным css.

Приветствия,

Значит можно выровнять изображения! Вам просто нужно использовать встроенный css для решения проблемы. Вы можете взять пример из github repo. В нижней части README.md имеется центрированное выровненное изображение. Для простоты вы можете просто сделать следующее:

<p align="center">
  <img />
</p>

Хотя, как сказал nulltoken, это было бы границей против философии Markdown!

Ответ 3

В качестве альтернативы, если у вас есть контроль над css, вы можете получить умные параметры url и css.

Markdown:

![A cute kitten](http://placekitten.com/200/300?style=centerme)

И CSS:

img[src$="centerme"] {
  display:block;
  margin: 0 auto;
}

Таким образом, вы можете создать различные варианты стилизации и по-прежнему держать уценку в чистоте от дополнительного кода. Конечно, у вас нет контроля над тем, что произойдет, если кто-то другой использует уценку где-то в другом месте, но это проблема с общим стилем со всеми документами по уценке, которые один делится.

Ответ 4

Он работает для меня на github

<p align="center"> 
<img src="...">
</p>

Ответ 5

Для выравнивания по левому краю

 <img align="left" width="600" height="200" src="https://www.python.org/python-.png">

Для правильного выравнивания

<img align="right" width="600" height="200" src="https://www.python.org/python-.png">

И для выравнивания по центру

<p align="center">
  <img width="600" height="200" src="https://www.python.org/python-.png">
</p>

Разместите его здесь для будущих ссылок, если вы найдете это полезным.

Ответ 6

Вы также можете изменить размер изображения до желаемой ширины и высоты. Например:

<p align="center">
  <img src="https://anyserver.com/image.png" width="750px" height="300px"/></p>

Чтобы добавить центрированный заголовок к изображению, просто еще одна строка:

<p align="center">This is a centered caption for the image<p align="center">

К счастью, это работает как для README.md, так и для страниц GitHub Wiki.

Ответ 7

Чтобы немного расширить ответ для поддержки локальных изображений, просто замените FILE_PATH_PLACEHOLDER на путь к изображению и проверьте его.

<p align="center">
  <img src="FILE_PATH_PLACEHOLDER">
</p>

Ответ 8

Мы можем использовать это. Пожалуйста, измените местоположение src ur img из папки git и добавьте альтернативный текст, если img не загружен

 <p align="center"> 
    <img src="ur img url here" alt="alternate text">
 </p>

Ответ 9

Мой способ решить проблему с позиционированием изображения - использовать атрибуты HTML:

![Image](Image.svg){ width="800" height="600" style="display: block; margin: 0 auto" }

Изображение было изменено и отцентрировано должным образом, по крайней мере, в моем локальном визуализаторе VS markdown.

Затем я отложил изменения в репо и, к сожалению, понял, что он не работает для файла GitHub README.md. Тем не менее, я оставлю этот ответ, так как он может помочь кому-то еще.

Итак, наконец, вместо этого я использовал старый добрый HTML-тег:

<img src="Image.svg" alt="Image" width="800" height="600" style="display: block; margin: 0 auto" />

Но угадайте что? Какой-то метод JS заменил мой атрибут style ! Я даже попробовал атрибут class и с тем же результатом!

Затем я нашел следующую страницу, где был использован еще более старый школьный HTML:

<p align="center">
    <img src="Image.svg" alt="Image" width="800" height="600" />
</p>

Этот работает нормально, однако, я хотел бы оставить его без дальнейших комментариев...

Ответ 10

Это очень просто.

-> This is centered Text <-

Поэтому, учитывая это, вы можете применить это к синтаксису img.

->![alt text](/link/to/img)<-