файл README на GitHub.МД изображение центр

Я некоторое время рассматривал синтаксис markdown, используемый в GitHub, но за исключением изменения размера изображения до размера readme.md page, я не могу понять, как центрировать изображение в нем.

возможно ли это? Если да, то как?

213
github markdown

10 ответов

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

TL; DR

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

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

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

Полная версия

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

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

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

файлы Markdown отображаются github.com сайт через использование Ruby Redcarpet библиотека.

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

104

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

Эй Waldyr,

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

спасибо,

Так можно выровнять изображения! вам просто нужно использовать встроенный css для решения проблемы. Вы можете возьмите пример из my GitHub РЕПО. В нижней части README.md существует выровненное по центру изображение. Для простоты вы можете просто сделать следующее:

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

хотя, как сказал нуллтокен, это будет граничить с философией Markdown!

458

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

Markdown:

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

и CSS:

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

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

26

это работает для меня на GitHub

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

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

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

4

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

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

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

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

мой способ решить проблему с позиционированием изображения - использовать атрибуты 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 атрибут! Я даже пытался и с тем же результатом!

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

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

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

0

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

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

это довольно просто на самом деле.

-> This is centered Text <-

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

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