Estou estudando a sintaxe de remarcação usada no GitHub há algum tempo, mas, exceto redimensionando uma imagem na extensão da página readme.md, não consigo descobrir como centralizar uma imagem nela.

É possível? Se for, como?

Eu estive observando a sintaxe de remarcação usada no github, [...] não consigo descobrir como centralizar uma imagem

TL; DR

Não, você não pode confiar apenas na sintaxe do Markdown. Markdown não se importa com o posicionamento.

Nota: Alguns processadores de remarcação suportam a inclusão de HTML (conforme indicado por @ waldyr.ar) e, no caso do GitHub, você pode recorrer a algo parecido <div style="text-align:center"><img src="..." /></div>. Lembre-se de que não há garantia de que a imagem será centralizada se o seu repositório for bifurcado em um ambiente de hospedagem diferente (Codeplex, BitBucket, ...) ou se o documento não for lido através de um navegador (visualização sublinhada de Markdown de texto, MarkdownPad, VisualStudio Web Visualização do Essentials Markdown, ...).

Nota 2: Lembre-se de que, mesmo no site do GitHub, a maneira como a redução é renderizada não é uniforme. O wiki, por exemplo, não permitirá truques posicionais de CSS.

Versão integral

A sintaxe Markdown não fornece a capacidade de controlar a posição de uma imagem.

Na verdade, seria fronteira contra a filosofia Markdown para permitir tais formatação, como indicado na "Filosofia" seção

"Um documento no formato Markdown deve ser publicado como está, como texto sem formatação, sem parecer ter sido marcado com tags ou instruções de formatação."

Os arquivos de remarcação são renderizados pelo site github.com através do uso da biblioteca Ruby Redcarpet .

O Redcarpet expõe algumas extensões (como tachado, por exemplo) que não fazem parte da sintaxe padrão do Markdown e fornecem "recursos" adicionais. No entanto, nenhuma extensão suportada permite centralizar uma imagem.

Isto é do suporte do Github:

Hey Waldyr,

O Markdown não permite que você ajuste o alinhamento diretamente (consulte os documentos aqui: http://daringfireball.net/projects/markdown/syntax#img ), mas você pode simplesmente usar uma tag HTML 'img' bruta e fazer o alinhamento com inline css.

Felicidades,

Portanto , é possível alinhar imagens! Você só precisa usar o CSS embutido para resolver o problema. Você pode dar um exemplo no meu repositório do github . Na parte inferior do arquivo README.md, há uma imagem alinhada centralizada. Para simplificar, você pode fazer o seguinte:

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

Embora, como nulltoken disse, seria uma fronteira contra a filosofia Markdown!

Este código do meu leia - me :

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

Produz esta saída de imagem, exceto centralizada quando visualizada no GitHub:

Como alternativa, se você tiver o controle do css, poderá ficar esperto com os parâmetros de URL e css .

Remarcação:

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

E CSS:

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

Você pode criar uma variedade de opções de estilo dessa maneira e ainda manter a remarcação limpa de código extra. É claro que você não tem controle sobre o que acontece se alguém usar a remarcação em outro lugar, mas isso é um problema geral de estilo com todos os documentos de repartição compartilhados.

Para alinhamento esquerdo

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

Para alinhamento correto

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

E para alinhamento central

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

Garfo aqui para futuras referências, se você achar isso útil.

Funciona para mim no github

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

Você também pode redimensionar a imagem para a largura e altura desejadas . Por exemplo:

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

Para adicionar uma legenda centralizada à imagem, apenas mais uma linha:

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

Felizmente, isso funciona para as páginas README.md e Wiki do GitHub.

Nós podemos usar isso. Altere a localização src de ur img da pasta git e adicione texto alternativo se o img não estiver carregado

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

Basta ir ao Readme.mdarquivo e usar este código.

<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> ajusta tudo na página e o centro alinha-o de acordo com as dimensões da página.

Para estender um pouco a resposta para oferecer suporte a imagens locais, basta substituir FILE_PATH_PLACEHOLDER o caminho da imagem e verificar.

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

Minha maneira de resolver o problema com o posicionamento da imagem era usar os atributos HTML:

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

A imagem foi redimensionada e centralizada corretamente, pelo menos no meu renderizador de remarcação VS local.

Então, enviei as alterações para repo e infelizmente percebi que ele não está funcionando para o arquivo README.md do GitHub . No entanto, deixarei esta resposta, pois pode ajudar outra pessoa.

Então, finalmente, acabei usando a boa e antiga tag HTML:

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

Mas adivinhem? Algum método JS substituiu meu styleatributo! Eu até tentei classatributo e com o mesmo resultado!

Então eu encontrei a seguinte página principal, onde ainda mais HTML antigo era usado:

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

Este está funcionando bem, no entanto, gostaria de deixá-lo sem mais comentários ...

TLDR;

Use este HTML / CSS para adicionar e centralizar uma imagem e defina seu tamanho para 60% da largura do espaço da tela dentro do seu arquivo de remarcação, que geralmente é um bom valor inicial:

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

Altere o widthvalor do CSS para qualquer porcentagem desejada ou remova-o completamente para usar o tamanho padrão da redução, que eu acho que é 100% da largura da tela se a imagem for maior que a tela ou se for a largura real da imagem.

Feito!

Ou continue lendo para obter mais informações.

Aqui estão várias opções de HTML e CSS que funcionam perfeitamente dentro dos arquivos de remarcação:

1. Centralize e configure (redimensione) TODAS as imagens no seu arquivo de remarcação:

Basta copiar e colar isso na parte superior do seu arquivo de remarcação para centralizar e redimensionar todas as imagens no arquivo (em seguida, basta inserir as imagens desejadas com a sintaxe de remarcação normal):

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

Ou, aqui está o mesmo código acima, mas com comentários detalhados em HTML e CSS para explicar exatamente o que está acontecendo:

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

Agora, se você inserir uma imagem usando a remarcação:

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

Ou HTML no seu arquivo de remarcação:

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

... será automaticamente centralizado e dimensionado para 60% da largura da visualização da tela, conforme descrito nos comentários no HTML e CSS acima. (É claro que o tamanho de 60% também é facilmente alterável, e apresento maneiras simples abaixo para fazer isso imagem por imagem também).

2. Centralize e configure as imagens caso a caso, uma de cada vez:

Se você copiou ou colou o <style>bloco acima na parte superior do seu arquivo de remarcação, isso também funcionará, pois substitui e tem precedência sobre quaisquer configurações de estilo de escopo de arquivo que você possa ter definido acima:

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

Você também pode formatá-lo em várias linhas, assim, e ainda funcionará:

<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. Além de todas as opções acima, você também pode criar classes de estilo CSS para ajudar a estilizar imagens individuais:

Adicione tudo isso ao topo do seu arquivo de remarcação.

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

Agora, seu imgbloco CSS definiu a configuração padrão para as imagens serem centralizadas e 60% da largura do espaço da tela em tamanho, mas você pode usar as classes CSS leftAligne rightAlignpara substituir essas configurações imagem por imagem.

Por exemplo, esta imagem será alinhada ao centro e com 60% de tamanho (o padrão definido acima):

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

Esta imagem será alinhada à esquerda , no entanto, com quebra de texto à direita, usando a leftAlignclasse CSS que acabamos de criar acima!

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

Pode ser assim:

Você ainda pode substituir qualquer uma de suas propriedades CSS por meio do styleatributo , no entanto, como width, assim:

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

E agora você vai conseguir isso:

4. Crie 3 classes CSS, mas não altere os imgpadrões de remarcação

Outra opção para o que mostramos acima, onde modificamos as img property:valueconfigurações padrão e criamos 2 classes, é deixar apenas todas as imgpropriedades de remarcação padrão em branco , mas criar 3 classes CSS personalizadas, como esta:

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

Use-os, é claro, assim:

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

Observe como eu defino manualmente a widthpropriedade usando o styleatributo CSS acima, mas se eu quisesse fazer algo mais complicado, também poderia criar algumas classes adicionais como essa, adicionando-as dentro do <style>...</style>bloco acima:

/* 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 */
}

Agora você pode atribuir várias classes ao mesmo objeto, assim. Simplesmente separe os nomes das classes por um espaço, NÃO por vírgula . No caso de configurações conflitantes, acredito que a configuração que ocorrer por último será a que entrar em vigor, substituindo as configurações definidas anteriormente. Esse também deve ser o caso no caso de você definir as mesmas propriedades CSS várias vezes na mesma classe CSS ou dentro do mesmo styleatributo HTML .

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

5. Consolide configurações comuns em classes CSS:

O último truque é o que aprendi nesta resposta aqui: Como posso usar CSS para estilizar várias imagens de maneira diferente? . Como você pode ver acima, todas as 3 alignclasses CSS definem a largura da imagem para 60%. Portanto, essa configuração comum pode ser definida de uma só vez, se você desejar, e poderá definir as configurações específicas para cada classe posteriormente:

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

Mais detalhes:

1. Meus pensamentos sobre HTML e CSS no Markdown

Para mim, qualquer coisa que possa ser escrita em um documento de remarcação e obter o resultado desejado é tudo o que procuramos, não uma sintaxe de "remarcação pura".

Em C e C ++, o compilador compila até o código do assembly e o assembly é montado no binário. Às vezes, no entanto, você precisa do controle de baixo nível que somente o assembly pode fornecer e, portanto, pode gravar um assembly embutido dentro de um arquivo de origem C ou C ++. Assembly é a linguagem de "nível inferior" e pode ser escrita dentro de C e C ++.

O mesmo acontece com remarcações. Markdown é a linguagem de alto nível que é interpretada em HTML e CSS. No entanto, onde precisamos de controle extra, podemos apenas "alinhar" o HTML e o CSS de nível inferior dentro do nosso arquivo de remarcação, e ele ainda será interpretado corretamente. Em certo sentido, portanto, HTML e CSS são sintaxe válida de "remarcação".

Portanto, para centralizar uma imagem no markdown, use HTML e CSS.

2. Inserção de imagem padrão em descontos:

Como adicionar uma imagem básica na remarcação com a formatação padrão HTML e CSS "nos bastidores":

Esta remarcação:

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

Produzirá esta saída:

Este é o meu hexacopter de fogo que eu fiz .

Você também pode opcionalmente adicionar uma descrição entre colchetes de abertura. Honestamente, eu nem tenho certeza do que isso faz, mas talvez ele seja convertido em um atributo de elemento HTML<img>alt , que é exibido no caso de a imagem não carregar, e pode ser lido pelos leitores de tela para cegos. Então, essa margem:

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

também produzirá esta saída:

3. Mais detalhes sobre o que está acontecendo no HTML / CSS ao centralizar e redimensionar uma imagem na remarcação:

Centralizar a imagem na remarcação requer que usemos o controle extra que HTML e CSS podem nos fornecer diretamente. Você pode inserir e centralizar uma imagem individual como esta:

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

Aqui está mais informações. sobre o que está acontecendo aqui:

1. A <imgparte do código acima é a " tag inicial " do HTML , enquanto a >no final é a " tag final " do HTML .
2. Tudo, desde a tag inicial até a tag final, inclusive, compõe esse img" elemento " do HTML .
3. HTML img "tags" / "elementos" são usados para inserir imagens em HTML.
4. Cada uma das atribuições dentro do elemento está configurando um " atributo " HTML .
5. O atributo "style" aceita estilo CSS ; portanto, tudo dentro das aspas duplas aqui: style=""é uma property:value" declaração " de valor-chave CSS .
   1. Observe que cada "propriedade: declaração de valor" do CSS é separada por ponto e vírgula ( ;), enquanto cada "atributo" do HTML neste "elemento" é separado por um espaço ( ).
6. Para obter a imagem centralizada no código HTML e CSS acima, os principais "atributos" são simplesmente os srce style.
7. A altum é opcional.
8. Dentro do HTML styleatributo, que aceita CSS styling, as declarações chave são todos os 4 que eu mostrar: display:block, float:none, margin-left:auto, e margin-right:auto.
   1. Se nada definiu a float propriedade anteriormente, você pode deixar de lado esta declaração, mas é uma boa ideia tê-la de qualquer maneira.
   2. Se você aprendeu como centralizar uma imagem usando HTML e CSS aqui: https://www.w3schools.com/howto/howto_css_image_center.asp .
9. O CSS usa comentários no estilo C ( /* my comment */).

Referências:

1. Leia mais sobre a sintaxe CSS aqui: https://www.w3schools.com/css/css_syntax.asp
2. Leia sobre "Tags HTML vs Elementos" aqui .
3. Eu fiz muito da minha prática de estilo HTML e CSS no meu leia-me de marcação do GitHub aqui: https://github.com/ElectricRCAircraftGuy/Arduino-STEM-Presentation
4. Aprendi tudo o que sei sobre HTML e CSS clicando em w3schools.com. Aqui estão algumas páginas específicas:
   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. Comentários em HTML e CSS: https://www.w3schools.com/css/css_comments.asp
5. Meu hexacopter de tiro ao fogo que fiz: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html

Uma abordagem de remarcação "pura" que pode lidar com isso é adicionar a imagem a uma tabela e centralizar a célula:

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

Ele deve produzir HTML semelhante a este:

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

Isso é bastante simples, na verdade.

-> This is centered Text <-

Portanto, tendo isso em mente, você pode aplicar isso à sintaxe img.

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