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

Является ли это возможным? Если это так, как?

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

TL; DR

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

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

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

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

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

На самом деле, было бы пограничным против философии Markdown , чтобы такое форматирования, как указано в «Философии» раздела

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

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

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

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

Эй, Вальдыр,

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

Ура,

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

<p align="center">
  <img src="http://some_place.com/image.png" />
</p>

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

Этот код из моего readme :

<p align="center">
  <img src="https://github.com/waldyr/Sublime-Installer/blob/master/sublime_text.png?raw=true" alt="Sublime's custom image"/>
</p>

Создает этот вывод изображения, кроме центрированного при просмотре на GitHub:

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

Markdown:

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

И CSS:

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

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

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

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

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

У меня работает на github

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

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

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

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

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

Просто зайдите в Readme.mdфайл и используйте этот код.

<div align="center">
<img src=https://newfastuff.com/wp-content/uploads/2019/05/bW7QXVB.png" >
<p>Perfectly balanced</p>
</div>

<div align=”center”> [ Your content here ]</div> помещает все на странице, и центр выравнивает это согласно размерам страницы.

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

<p align="center">
  <img src="FILE_PATH_PLACEHOLDER">
</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 атрибут! Я даже попробовал classатрибут и с тем же результатом!

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

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

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

TLDR;

Используйте этот HTML / CSS для добавления и центрирования изображения и установите его размер равным 60% ширины пространства экрана в вашем файле уценки, что обычно является хорошим начальным значением:

<img src="https://i.stack.imgur.com/RJj4x.png" 
     style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%"> 

Изменить width значение CSS на любой процент, который вы хотите, или полностью удалите его, чтобы использовать размер по умолчанию для уценки, который, я думаю, составляет 100% ширины экрана, если изображение больше экрана, или в противном случае это фактическая ширина изображения.

Готово!

Или продолжайте читать, чтобы узнать больше информации.

Вот различные варианты HTML и CSS, которые прекрасно работают в файлах разметки:

1. Отцентрируйте и настройте (измените размер) ВСЕ изображения в вашем файле уценки:

Просто скопируйте и вставьте это в верхнюю часть вашего файла уценки, чтобы отцентрировать и изменить размеры всех изображений в файле (затем просто вставьте все изображения, которые вы хотите с обычным синтаксисом уценки):

<style>
img
{
    display:block; 
    float:none; 
    margin-left:auto;
    margin-right:auto;
    width:60%;
}
</style> 

Или вот тот же код, что и выше, но с подробными комментариями HTML и CSS, чтобы точно объяснить, что происходит:

<!-- (This is an HTML comment). Copy and paste this entire HTML `<style>...</style>` element (block)
to the top of your markdown file -->
<style>
/* (This is a CSS comment). The below `img` style sets the default CSS styling for all images
hereafter in this markdown file. */
img
{
    /* Default display value is `inline-block`. Set it to `block` to prevent surrounding text from
    wrapping around the image. Instead, `block` format will force the text to be above or below the
    image, but never to the sides. */
    display:block; 
    /* Common float options are `left`, `right`, and `none`. Set to `none` to override any previous
    settings which might have been `left` or `right`. `left` causes the image to be to the left,
    with text wrapped to the right of the image, and `right` causes the image to be to the right,
    with text wrapped to its left, so long as `display:inline-block` is also used. */
    float:none; 
    /* Set both the left and right margins to `auto` to cause the image to be centered. */
    margin-left:auto;
    margin-right:auto;
    /* You may also set the size of the image, in percent of width of the screen on which the image
    is being viewed, for example. A good starting point is 60%. It will auto-scale and auto-size
    the image no matter what screen or device it is being viewed on, maintaining proporptions and 
    not distorting it. */
    width:60%;
    /* You may optionally force a fixed size, or intentionally skew/distort an image by also 
    setting the height. Values for `width` and `height` are commonly set in either percent (%) 
    or pixels (px). Ex: `width:100%;` or `height:600px;`. */
    /* height:400px; */
}
</style> 

Теперь, вставляете ли вы изображение с помощью уценки:

![](https://i.stack.imgur.com/RJj4x.png)

Или HTML в вашем файле уценки:

<img src="https://i.stack.imgur.com/RJj4x.png"> 

... он будет автоматически отцентрирован и размером до 60% ширины экрана, как описано в комментариях к HTML и CSS выше. (Конечно, размер 60% тоже очень легко изменить, и ниже я предлагаю простые способы сделать это для каждого изображения отдельно).

2. Центрируйте и настраивайте изображения по отдельности, по одному:

Независимо от того, скопировали ли вы указанный выше <style>блок и вставили его в верхнюю часть файла уценки, это также будет работать, поскольку оно переопределяет и имеет приоритет над любыми настройками стиля области действия файла, которые вы, возможно, установили выше:

<img src="https://i.stack.imgur.com/RJj4x.png" style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%"> 

Вы также можете отформатировать его в несколько строк, вот так, и он все равно будет работать:

<img src="https://i.stack.imgur.com/RJj4x.png" 
     alt="this is an optional description of the image to help the blind and show up in case the 
          image won't load" 
     style="display:block; /* override the default display setting of `inline-block` */ 
            float:none; /* override any prior settings of `left` or `right` */ 
            /* set both the left and right margins to `auto` to center the image */
            margin-left:auto; 
            margin-right:auto;
            width:60%; /* optionally resize the image to a screen percentage width if you want too */
            "> 

3. Помимо всего вышеперечисленного, вы также можете создавать классы стилей CSS, чтобы помочь стилизовать отдельные изображения:

Добавьте все это в начало вашего файла уценки.

<style>

/* By default, make all images center-aligned, and 60% of the width 
of the screen in size */
img
{
    display:block; 
    float:none; 
    margin-left:auto;
    margin-right:auto;
    width:60%;
}

/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
    display:inline-block;
    float:left;
    /* provide a 15 pixel gap between the image and the text to its right */
    margin-right:15px; 
}

/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
    display:inline-block;
    float:right;
    /* provide a 15 pixel gap between the image and the text to its left */
    margin-left:15px;
}

</style> 

Теперь ваш imgблок CSS установил настройку по умолчанию для изображений, которые должны быть центрированы, и 60% ширины экранного пространства по размеру, но вы можете использовать классы CSS leftAlignи rightAlignCSS, чтобы переопределить эти настройки для каждого изображения в отдельности.

Например, это изображение будет выровнено по центру и имеет размер 60% (по умолчанию я установил выше):

<img src="https://i.stack.imgur.com/RJj4x.png"> 

Это изображение будет выровнено по левому краю , однако с переносом текста вправо, используя leftAlignкласс CSS, который мы только что создали!

<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign">

Это может выглядеть так:

Тем не менее, вы можете переопределить любое из его свойств CSS через styleатрибут , например, width, например:

<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign" style="width:20%">

И теперь вы получите это:

4. Создайте 3 CSS-класса, но не меняйте imgзначения по умолчанию для уценки

Другой вариант к тому, что мы только что показали выше, где мы изменили img property:valueнастройки по умолчанию и создали 2 класса, это просто оставить все imgсвойства уценки по умолчанию в покое, но создать 3 пользовательских класса CSS, например:

<style>

/* Create a CSS class to style images to center-align */
.centerAlign
{
    display:block;
    float:none;
    /* Set both the left and right margins to `auto` to cause the image to be centered. */
    margin-left:auto;
    margin-right:auto;
    width:60%;
}

/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
    display:inline-block;
    float:left;
    /* provide a 15 pixel gap between the image and the text to its right */
    margin-right:15px; 
    width:60%;
}

/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
    display:inline-block;
    float:right;
    /* provide a 15 pixel gap between the image and the text to its left */
    margin-left:15px;
    width:60%;
}

</style> 

Используйте их, конечно, так:

<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign" style="width:20%">

Обратите внимание, как я вручную устанавливал widthсвойство с помощью styleатрибута CSS выше, но если бы у меня было что-то более сложное, что я хотел сделать, я мог бы также создать некоторые дополнительные классы, подобные этой, добавив их в <style>...</style>блок выше:

/* custom CSS class to set a predefined "small" size for an image */
.small
{
    width:20%;
    /* set any other properties, as desired, inside this class too */
}

Теперь вы можете назначить несколько классов одному объекту, как это. Просто разделяйте имена классов пробелом, а НЕ запятой . Я полагаю, что в случае противоречивых настроек, последний параметр будет последним , который вступит в силу, переопределив любые ранее установленные параметры. Это также должно иметь место в случае, если вы устанавливаете одни и те же свойства CSS несколько раз в одном и том же классе CSS или внутри одного и того же styleатрибута HTML .

<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign small">

5. Консолидация общих настроек в классах CSS:

Последний трюк, который я узнал в этом ответе здесь: Как я могу использовать CSS, чтобы по-разному стилизовать несколько изображений? , Как вы можете видеть выше, все 3 класса CSS alignустанавливают ширину изображения на 60%. Таким образом, этот общий параметр можно установить сразу, если хотите, тогда вы можете установить конкретные параметры для каждого класса:

<style>

/* set common properties for multiple CSS classes all at once */
.centerAlign, .leftAlign, .rightAlign {
    width:60%;
}

/* Now set the specific properties for each class individually */

/* Create a CSS class to style images to center-align */
.centerAlign
{
    display:block;
    float:none;
    /* Set both the left and right margins to `auto` to cause the image to be centered. */
    margin-left:auto;
    margin-right:auto;
}

/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
    display:inline-block;
    float:left;
    /* provide a 15 pixel gap between the image and the text to its right */
    margin-right:15px; 
}

/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
    display:inline-block;
    float:right;
    /* provide a 15 pixel gap between the image and the text to its left */
    margin-left:15px;
}

/* custom CSS class to set a predefined "small" size for an image */
.small
{
    width:20%;
    /* set any other properties, as desired, inside this class too */
}

</style> 

Больше деталей:

1. Мои мысли о HTML и CSS в Markdown

Насколько я понимаю, все, что мы можем записать в документе уценки и получить желаемый результат - это не какой-то синтаксис «чистой уценки».

В C и C ++ компилятор компилируется в код сборки, а затем сборка собирается в двоичный код. Однако иногда вам необходим низкоуровневый элемент управления, который может обеспечить только сборка, и поэтому вы можете написать встроенную сборку прямо в исходном файле C или C ++. Ассемблер является языком «нижнего уровня», и его можно написать прямо в C и C ++.

Так же и с уценкой. Markdown - это язык высокого уровня, который интерпретируется как HTML и CSS. Однако там, где нам нужен дополнительный контроль, мы можем просто «встроить» HTML и CSS более низкого уровня прямо в наш файл уценки, и он все равно будет интерпретироваться правильно. Следовательно, в некотором смысле HTML и CSS являются допустимым синтаксисом «уценки».

Итак, чтобы центрировать изображение в уценке, используйте HTML и CSS.

2. Стандартная вставка изображения в уценке:

Как добавить базовое изображение в уценку с заданным по умолчанию «закулисным» форматированием HTML и CSS:

Эта уценка:

![](https://i.stack.imgur.com/RJj4x.png)

Будет производить этот вывод:

Это мой огнестрельный гексакоптер, который я сделал .

При желании вы также можете добавить описание в открывающиеся квадратные скобки. Честно говоря, я даже не уверен, что это делает, но, возможно, он преобразуется в атрибут элемента HTML<img>alt , который отображается в случае, если изображение не может быть загружено, и может быть прочитан программами чтения с экрана для слепых. Итак, эта уценка:

![this is my hexacopter I built](https://i.stack.imgur.com/RJj4x.png)

также произведет этот вывод:

3. Подробнее о том, что происходит в HTML / CSS при центрировании и изменении размера изображения в уценке:

Центрирование изображения в уценке требует, чтобы мы использовали дополнительный контроль, который HTML и CSS могут предоставить нам напрямую. Вы можете вставить и отцентрировать отдельное изображение следующим образом:

<img src="https://i.stack.imgur.com/RJj4x.png" 
     alt="this is my hexacopter I built" 
     style="display:block; 
            float:none; 
            margin-left:auto; 
            margin-right:auto;
            "> 

Вот больше информации. о том, что здесь происходит:

1. <imgЧасть приведенного выше кода является HTML « начать тег », а >в конце концов , это HTML " конечный тег ».
2. Все, от начального тега до конечного тега, включительно, составляет этот элемент HTML img" ».
3. HTML img "теги" / "элементы" используются для вставки изображений в HTML.
4. Каждое из назначений внутри элемента настраивает атрибут HTML " » .
5. Атрибут «стиль» принимает CSS стиль , так что все в двойных кавычках здесь: style=""это CSS property:valueключ-значение " декларация ».
   1. Обратите внимание, что каждое CSS «объявление свойства: значение» разделяется точкой с запятой ( ;), тогда как каждый «атрибут» HTML в этом «элементе» разделяется пробелом ( ).
6. Чтобы получить изображение в центре нашего HTML и CSS кода выше, ключевые «атрибуты» - это просто srcиstyle ».
7. alt не является обязательным.
8. Внутри HTML styleатрибут, который принимает CSS стили, ключевые заявления все 4 , которые я показываю: display:block, float:none, margin-left:auto, иmargin-right:auto .
   1. Если ничего ранее не было установлено float свойство ранее, тогда вы можете оставить это объявление, но в любом случае полезно иметь его на всякий случай.
   2. Если вы впервые узнали, как центрировать изображение с использованием HTML и CSS, здесь: https://www.w3schools.com/howto/howto_css_image_center.asp .
9. CSS использует комментарии в стиле C ( /* my comment */).

Ссылки:

1. Узнайте больше о синтаксисе CSS здесь: https://www.w3schools.com/css/css_syntax.asp
2. Прочитайте о "HTML-теги против элементов" здесь .
3. Я сделал большую часть своей практики стилей HTML и CSS в моем readme GitHub для разметки здесь: https://github.com/ElectricRCAircraftGuy/Arduino-STEM-Presentation
4. Я узнал почти все, что я знаю о HTML и CSS, нажав на w3schools.com. Вот несколько конкретных страниц:
   1. %%%%% https://www.w3schools.com/howto/howto_css_image_center.asp
   2. https://www.w3schools.com/css/css_float.asp
      1. https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float2
   3. https://www.w3schools.com/css/css3_images.asp
   4. https://www.w3schools.com/tags/default.asp
   5. HTML и CSS комментарии: https://www.w3schools.com/css/css_comments.asp
5. Мой огнестрельный гексакоптер, который я сделал: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html

«Чистый» подход уценки, который может справиться с этим, добавляет изображение в таблицу и затем центрирует ячейку:

| ![Image](img.png) |
| :--: | 

Он должен производить HTML, похожий на этот:

<table>
    <thead>
        <tr>
            <th style="text-align:center;"><img src="img.png" alt="Image"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

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

-> This is centered Text <-

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

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