github README.md центр изображения


339

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

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


Pandoc предложил общий синтаксис для описания текстового контента, который, если он станет частью стандарта Markdown, облегчит центрирование изображений.
Дейв Джарвис

1
Отвечает ли это на ваш вопрос? Уценка и выравнивание изображений
TylerH

Ответы:


161

Я смотрел на синтаксис уценки, используемый в 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 и предоставляют дополнительные «функции». Однако никакое поддерживаемое расширение не позволяет центрировать изображение.


4
Спасибо, я решил путем увеличения размера изображения. Жаль их пропускной способности, но они не оставили мне выбора
Джонни Полинг

47
Это работает просто отлично:<img align="..." src="..." alt="...">
Nux

@JohonnyPauling, если вы беспокоитесь о том, чтобы не использовать слишком много пропускной способности github, вы можете взглянуть на Raw Git , который обслуживает файлы, хранящиеся на GitHub, кэшируя их в своей системе. Таким образом, только один доступ выполняется на ресурсе на GitHub, сохраняя их пропускную способность.
Данидеми

6
Исходная уценка обрабатывает синтаксис уценки внутри тегов span. Таким образом, должно сработать что-то вроде следующего: <span style="display:block;text-align:center">![Test Automation]Automated-Testing.png)</span>
Дакшинамурти Карра

6
alignАтрибут на imgтеге устаревшим HTML 4.01 и устаревший , как в HTML5.
taylorthurlow

602

Это из поддержки 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:

Пользовательское изображение Sublime


93
Почему это не был принятый ответ, я не знаю. Этот ответ фактически объясняет спрашивающему, как выполнить задачу.
Фергус в Лондоне

93
+1, мне все равно, если это противоречит философии уценки, я просто хочу центрировать изображение! : D
Габриэль Ламас

6
Да, в соответствии с философией уценки, просто давайте заставим вещи выглядеть красиво: p
Thomas

3
Похоже, это работает (как видно из репозитория плаката), но CSS НЕ поддерживается в вики Github. Каждая попытка указать CSS была исключена. Аналогично, указанный атрибут выравнивания также удаляется, когда я пытаюсь сделать это в вики.
Шон Саут

4
Кажется, что alignатрибут не поддерживается в HTML5 ?
острокач

40

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

Markdown:

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

И CSS:

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

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


2
Это прекрасно работает, но используя якорь (#) по строке запроса, вероятно , является лучшим решением , как я писал в этом ответе (?): Stackoverflow.com/questions/255170/markdown-and-image-alignment/... - однако я не Не верю, что github readme.md поддерживает определение CSS.
тремор

Идеальное решение для тех, кто запускает собственный экземпляр GitLab!
Ксуннамиус

33

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

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

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


31

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

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

9

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

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


9

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

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

5

Просто зайдите в 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> помещает все на странице, и центр выравнивает это согласно размерам страницы.


Только используя div контейнер делал это прямо на странице GitLab ReadME
p4pp3rfry

4

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

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

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

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

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


1

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

0

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

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

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

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

Это не похоже на работу: ширина таблицы определяется шириной ее содержимого. Он также помещает рамку вокруг изображения (согласно таблице стилей по умолчанию на github).
Ричард Смит

Я не осознавал, что это сделал. За пределами GitHub именно так я центрирую изображения в уценке.
Афуззиллама

-15

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

-> This is centered Text <-

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

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

3
Что это за уценка?
Wingman4l7

2
Мне здесь тоже интересно. Это похоже на скриншот GitHub, но Redcarpet определенно не реализует это. Как ты это сделал? Можете ли вы дать ссылку на файл на GitHub?
ELLIOTTCABLE

3
Это сайт Jeckyll, поэтому GitHub анализирует код еще до того, как он попадет в репозиторий.
13:00

5
Просто к сведению всех, кто рассматривает возможность пометить это для внимания модератора: тот факт, что ответ не работает для вас, не является причиной пометить его. Просто комментируйте и / или понижайте голос. Я не собираюсь удалять ответ за технические неточности. Если vdclouis хочет удалить его сам, потому что сообщество считает его бесполезным, это должен быть его выбор.
Коди Грей
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.