файл README на GitHub.МД изображение центр
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 и предоставляют дополнительные "функции". Однако ни одно поддерживаемое расширение не позволяет центрировать изображение.
Это из поддержки Github:
Эй Waldyr,
Markdown не позволяет настраивать выравнивание напрямую (см. документы здесь:http://daringfireball.net/projects/markdown/syntax#img), но вы можете просто использовать необработанный HTML-тег " img " и выполнить выравнивание со встроенным css.
спасибо,
Так можно выровнять изображения! вам просто нужно использовать встроенный css для решения проблемы. Вы можете возьмите пример из my GitHub РЕПО. В нижней части README.md существует выровненное по центру изображение. Для простоты вы можете просто сделать следующее:
<p align="center">
<img />
</p>
хотя, как сказал нуллтокен, это будет граничить с философией Markdown!
альтернативно, если у вас есть контроль над 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, которые один разделяет.
вы также можете изменить размер изображения до нужного ширина и высота. Например:
<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.
чтобы немного расширить ответ для поддержки локальных изображений, просто заменить FILE_PATH_PLACEHOLDER
к вашему пути изображения и проверьте его.
<p align="center">
<img src="FILE_PATH_PLACEHOLDER">
</p>
на выравнивание по левому краю
<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>
мой способ решить проблему с позиционированием изображения - использовать атрибуты 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>
это работает нормально, однако, я хотел бы оставить его без дальнейших комментариев...
мы можем использовать это. Пожалуйста, измените местоположение src ur img из папки git и добавьте альтернативный текст, если img не загружен
<p align="center">
<img src="ur img url here" alt="alternate text">
</p>
это довольно просто на самом деле.
-> This is centered Text <-
поэтому, принимая это во внимание, вы можете применить это к синтаксису img.
->![alt text](/link/to/img)<-