He estado mirando la sintaxis de rebajas utilizada en GitHub durante un tiempo, pero excepto cambiar el tamaño de una imagen en la medida de la página readme.md, no puedo encontrar la forma de centrar una imagen en ella.

¿Es posible? Si es así, ¿cómo?

He estado mirando la sintaxis de rebajas utilizada en github, [...] no puedo entender cómo centrar una imagen

TL; DR

No, no puedes confiar solo en la sintaxis de Markdown. A Markdown no le importa el posicionamiento.

Nota: Algunos procesadores de rebajas admiten la inclusión de HTML (como señala acertadamente @ waldyr.ar), y en el caso de GitHub puede recurrir a algo así <div style="text-align:center"><img src="..." /></div>. Tenga en cuenta que no hay garantía de que la imagen se centre si su repositorio se bifurca en un entorno de alojamiento diferente (Codeplex, BitBucket, ...) o si el documento no se lee a través de un navegador (Vista previa de Sublime Text Markdown, MarkdownPad, VisualStudio Web Vista previa de Markdown de Essentials, ...).

Nota 2: tenga en cuenta que incluso dentro del sitio web de GitHub, la forma en que se aplica el descuento no es uniforme. El wiki, por ejemplo, no permitirá tales trucos posicionales de CSS.

Versión íntegra

La sintaxis de Markdown no proporciona a uno la capacidad de controlar la posición de una imagen.

De hecho, estaría en contra de la filosofía Markdown permitir dicho formato, como se indica en la sección "Filosofía"

"Un documento con formato Markdown debe publicarse tal cual, como texto sin formato, sin parecer que ha sido marcado con etiquetas o instrucciones de formato".

Los archivos de Markdown son prestados por el sitio web github.com mediante el uso de la biblioteca Ruby Redcarpet .

Redcarpet expone algunas extensiones (como tachado, por ejemplo) que no son parte de la sintaxis estándar de Markdown y proporcionan "características" adicionales. Sin embargo, ninguna extensión compatible le permite centrar una imagen.

Esto es del soporte de Github:

Hola Waldyr

Markdown no le permite ajustar la alineación directamente (consulte los documentos aquí: http://daringfireball.net/projects/markdown/syntax#img ), pero puede usar una etiqueta HTML 'img' sin procesar y hacer la alineación en línea css.

Salud,

¡Entonces es posible alinear imágenes! Solo tiene que usar CSS en línea para resolver el problema. Puedes tomar un ejemplo de mi repositorio github . En la parte inferior de README.md hay una imagen alineada centrada. Para simplificar, puede hacer lo siguiente:

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

Aunque, como dijo nulltoken, ¡estaría en el límite de la filosofía Markdown!

Este código de mi archivo Léame :

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

Produce esta salida de imagen, excepto centrada cuando se ve en GitHub:

Alternativamente, si tiene control de css, puede ser inteligente con los parámetros de url y css .

Reducción:

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

Y CSS:

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

Puede crear una variedad de opciones de estilo de esta manera y aún así mantener el marcado limpio de código adicional. Por supuesto, no tiene control sobre lo que sucede si otra persona usa el descuento en otro lugar, pero eso es un problema de estilo general con todos los documentos de descuento que uno comparte.

Para alineación izquierda

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

Para alineación correcta

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

Y para alineación central

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

Bifurque aquí para futuras referencias, si lo encuentra útil.

Funciona para mí en github

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

También puede cambiar el tamaño de la imagen al ancho y alto deseados . Por ejemplo:

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

Para agregar un título centrado a la imagen, solo una línea más:

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

Afortunadamente, esto funciona tanto para README.md como para las páginas Wiki de GitHub.

Podemos usar esto. Cambie la ubicación src de ur img desde la carpeta git y agregue texto alternativo si img no está cargado

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

Simplemente vaya al Readme.mdarchivo y use 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> se ajusta a todo en la página y el centro lo alinea de acuerdo con las dimensiones de la página.

Para ampliar un poco la respuesta para admitir imágenes locales, simplemente reemplace FILE_PATH_PLACEHOLDER su ruta de imagen y compruébelo.

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

Mi forma de resolver el problema con el posicionamiento de la imagen fue usar los atributos HTML:

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

La imagen se redimensionó y se centró correctamente, al menos en mi renderizador de reducción de VS local.

Luego, empujé los cambios al repositorio y desafortunadamente me di cuenta de que no funciona para el archivo GitHub README.md . Sin embargo, dejaré esta respuesta ya que podría ayudar a alguien más.

Entonces, finalmente, terminé usando una buena etiqueta HTML en su lugar:

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

¿Pero adivina que? ¡Algún método JS reemplazó mi styleatributo! Incluso he intentadoclass atributo y con el mismo resultado!

Luego encontré la siguiente página esencial donde se usaba aún más HTML de la vieja escuela:

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

Este está funcionando bien, sin embargo, me gustaría dejarlo sin más comentarios ...

TLDR;

Use este HTML / CSS para agregar y centrar una imagen y establecer su tamaño al 60% del ancho del espacio de la pantalla dentro de su archivo de descuento, que generalmente es un buen valor inicial:

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

Cambiar el width valor de CSS al porcentaje que desee, o elimínelo por completo para usar el tamaño predeterminado de reducción, que creo que es el 100% del ancho de la pantalla si la imagen es más grande que la pantalla, o de lo contrario es el ancho de la imagen real.

¡Hecho!

O sigue leyendo para obtener más información.

Aquí hay varias opciones de HTML y CSS que funcionan perfectamente dentro de los archivos de descuento:

1. Centre y configure (cambie el tamaño) TODAS las imágenes en su archivo de descuento:

Simplemente copie y pegue esto en la parte superior de su archivo de marcado para centrar y cambiar el tamaño de todas las imágenes en el archivo (luego simplemente inserte las imágenes que desee con la sintaxis de marcado normal):

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

O, aquí está el mismo código que el anterior pero con comentarios detallados de HTML y CSS para explicar exactamente lo que está sucediendo:

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

Ahora, si inserta una imagen usando Markdown:

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

O HTML en su archivo de descuento:

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

... se centrará automáticamente y se dimensionará al 60% del ancho de la vista de pantalla, como se describe en los comentarios dentro del HTML y CSS anteriores. (Por supuesto, el tamaño del 60% también se puede cambiar fácilmente, y a continuación presento formas simples para hacerlo también imagen por imagen).

2. Centre y configure las imágenes caso por caso, una a la vez:

Independientemente de si ha copiado y pegado el <style>bloque anterior en la parte superior de su archivo de reducción, esto también funcionará, ya que anula y tiene prioridad sobre cualquier configuración de estilo de alcance de archivo que haya establecido anteriormente:

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

También puede formatearlo en varias líneas, como esta, y seguirá funcionando:

<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. Además de todo lo anterior, también puede crear clases de estilo CSS para ayudar a estilizar imágenes individuales:

Agregue todo esto a la parte superior de su archivo de descuento.

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

Ahora, su imgbloque CSS ha establecido la configuración predeterminada para que las imágenes se centren y tengan un tamaño del 60% del ancho del espacio de la pantalla, pero puede usar las clases leftAligny rightAlignCSS para anular esas configuraciones imagen por imagen.

Por ejemplo, esta imagen estará alineada al centro y tendrá un tamaño del 60% (el valor predeterminado que configuré anteriormente):

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

Sin embargo, esta imagen se alineará a la izquierda , con el texto ajustado a su derecha, ¡usando la leftAlignclase CSS que acabamos de crear arriba!

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

Podría verse así:

Sin embargo, aún puede anular cualquiera de sus propiedades CSS a través del styleatributo , como el ancho, como este:

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

Y ahora obtendrás esto:

4. Cree 3 clases CSS, pero no cambie el img valores predeterminados de rebajas

Otra opción a lo que acabamos de mostrar arriba, donde modificamos la img property:valueconfiguración predeterminada y creamos 2 clases, es dejar solo todas las imgpropiedades predeterminadas de reducción , pero crear 3 clases 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> 

Úselos, por supuesto, así:

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

Observe cómo configuro manualmente la widthpropiedad usando el styleatributo CSS anterior, pero si tuviera algo más complicado que quisiera hacer, también podría crear algunas clases adicionales como esta, agregándolas dentro del <style>...</style>bloque anterior:

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

Ahora puede asignar varias clases al mismo objeto, como este. Simplemente separe los nombres de clase por un espacio, NO una coma . En el caso de configuraciones conflictivas, creo que cualquier configuración que ocurra al final será la que surta efecto, anulando cualquier configuración establecida previamente. Este también debería ser el caso en el caso de que establezca las mismas propiedades CSS varias veces en la misma clase CSS o dentro del mismo styleatributo HTML .

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

5. Consolidar configuraciones comunes en clases CSS:

El último truco es uno que aprendí en esta respuesta aquí: ¿Cómo puedo usar CSS para diseñar varias imágenes de manera diferente? . Como puede ver arriba, las 3 alignclases de CSS establecen el ancho de la imagen al 60%. Por lo tanto, esta configuración común se puede configurar de una vez de esta manera si lo desea, luego puede establecer la configuración específica para cada clase después:

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

Más detalles:

1. Mis pensamientos sobre HTML y CSS en Markdown

En lo que a mí respecta, todo lo que se puede escribir en un documento de rebaja y obtener el resultado deseado es todo lo que buscamos, no una sintaxis de "rebaja pura".

En C y C ++, el compilador se compila en código de ensamblaje, y el ensamblaje se ensambla en binario. A veces, sin embargo, necesita el control de bajo nivel que solo el ensamblado puede proporcionar, por lo que puede escribir ensamblaje en línea dentro de un archivo fuente C o C ++. Assembly es el lenguaje de "nivel inferior" y se puede escribir directamente dentro de C y C ++.

Así es con Markdown. Markdown es el lenguaje de alto nivel que se interpreta en HTML y CSS. Sin embargo, donde necesitamos un control adicional, podemos simplemente "en línea" el HTML y CSS de nivel inferior dentro de nuestro archivo de descuento, y aún se interpretará correctamente. En cierto sentido, por lo tanto, HTML y CSS son sintaxis válida de "rebaja".

Entonces, para centrar una imagen en markdown, use HTML y CSS.

2. Inserción estándar de imágenes en rebajas:

Cómo agregar una imagen básica en markdown con el formato HTML y CSS "detrás de escena" predeterminado:

Esta rebaja:

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

Producirá esta salida:

Este es mi hexacopter que disparó fuego .

También puede agregar opcionalmente una descripción en los corchetes iniciales. Honestamente, ni siquiera estoy seguro de lo que hace, pero tal vez se convierte en un atributo de elemento HTML<img>alt , que se muestra en caso de que la imagen no se pueda cargar, y los lectores de pantalla pueden leerlo para ciegos. Entonces, esta rebaja:

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

también producirá esta salida:

3. Más detalles sobre lo que sucede en HTML / CSS al centrar y redimensionar una imagen en Markdown:

Centrar la imagen en markdown requiere que usemos el control adicional que HTML y CSS nos pueden dar directamente. Puede insertar y centrar una imagen 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;
            "> 

Aquí hay más información. sobre lo que está pasando aquí:

1. La <imgparte del código anterior es la " etiqueta de inicio " HTML , mientras que >al final es la " etiqueta de finalización " HTML .
2. Todo, desde la etiqueta de inicio hasta la etiqueta de finalización, inclusive, constituye este img" elemento " HTML .
3. Las img "etiquetas" / "elementos" HTML se utilizan para insertar imágenes en HTML.
4. Cada una de las asignaciones dentro del elemento está configurando un " atributo " HTML .
5. El atributo "estilo" acepta el estilo CSS , por lo que todo lo que está dentro de las comillas dobles aquí: style=""es una property:value" declaración " clave-valor CSS .
   1. Tenga en cuenta que cada "propiedad: declaración de valor" CSS está separada por un punto y coma ( ;), mientras que cada "atributo" HTML en este "elemento" está separado por un espacio ( ).
6. Para que la imagen se centre en nuestro código HTML y CSS anterior, los "atributos" clave son simplemente los srcy style.
7. El altuno es opcional.
8. En el interior del HTML styleatributo, que acepta estilo CSS, las declaraciones clave son los 4 que muestro: display:block, float:none, margin-left:auto, y margin-right:auto.
   1. Si nada ha configurado la float propiedad anteriormente, puede omitir esta declaración, pero es una buena idea tenerla de todos modos por si acaso.
   2. Si primero aprendió a centrar una imagen usando HTML y CSS aquí: https://www.w3schools.com/howto/howto_css_image_center.asp .
9. CSS utiliza comentarios de estilo C ( /* my comment */).

Referencias

1. Lea más sobre la sintaxis CSS aquí: https://www.w3schools.com/css/css_syntax.asp
2. Lea acerca de "Etiquetas HTML vs Elementos" aquí .
3. Hice mucho de mi práctica de estilo HTML y CSS en mi archivo Léame de GitHub: https://github.com/ElectricRCAircraftGuy/Arduino-STEM-Presentation
4. Aprendí casi todo lo que sé sobre HTML y CSS haciendo clic en w3schools.com. Aquí hay algunas 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. Comentarios HTML y CSS: https://www.w3schools.com/css/css_comments.asp
5. Mi hexacóptero de disparos que hice: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html

Un enfoque de reducción "puro" que puede manejar esto es agregar la imagen a una tabla y luego centrar la celda:

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

Debería producir HTML similar a este:

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

Esto es bastante simple en realidad.

-> This is centered Text <-

Entonces, teniendo esto en cuenta, puede aplicar esto a la sintaxis img.

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