Comment centrer une image dans le fichier README.md de GitHub ?

Question

Je me suis penché sur la syntaxe MarkDown utilisée dans GitHub depuis un certain temps, mais à part le redimensionnement d'une image à la largeur de l'écran, je n'ai pas trouvé de solution. README.md mais je n'arrive pas à trouver comment y centrer une image.

Est-ce possible ? Si oui, comment puis-je le faire ?

Answer 1

Ceci provient du support de Github :

Salut Waldyr,

Le format Markdown ne permet pas de modifier directement l'alignement (voir la documentation ici) : http://daringfireball.net/projects/markdown/syntax#img ), mais vous pouvez simplement utiliser une balise HTML 'img' brute et effectuer l'alignement avec du css en ligne.

A la vôtre,

Alors il est possible d'aligner des images ! Il suffit d'utiliser le css en ligne pour résoudre le problème. Vous pouvez prendre un exemple dans mon répertoire Github . Au bas de README.md il y a une image alignée centrée. Pour simplifier, vous pouvez simplement faire comme suit :

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

Bien que, comme l'a dit nulltoken, ce serait à la limite de la philosophie Markdown !

---

Ce code de ma notice d'utilisation :

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

Produit cette image en sortie, sauf qu'elle est centrée lorsqu'elle est visualisée sur GitHub :

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

Answer 2

J'ai examiné la syntaxe markdown utilisée dans github [...], mais je n'arrive pas à trouver comment centrer une image.

TL;DR

Non, vous ne pouvez pas. uniquement en s'appuyant sur la syntaxe Markdown. Markdown ne se soucie pas du positionnement.

Note : Certains processeurs markdown supportent l'inclusion de HTML (comme l'a souligné à juste titre @waldyr.ar), et dans le cas de GitHub, vous pouvez vous rabattre sur quelque chose comme <div style="text-align:center"><img src="..." /></div> . Attention, il n'y a aucune garantie que l'image sera centrée si votre dépôt est forké dans un environnement d'hébergement différent (Codeplex, BitBucket, ...) ou si le document n'est pas lu par un navigateur (aperçu Markdown de Sublime Text, MarkdownPad, aperçu Markdown de VisualStudio Web Essentials, ...).

Note 2 : Gardez à l'esprit que même sur le site Web de GitHub, la façon dont le format markdown est rendu n'est pas uniforme. Le wiki, par exemple, n'autorise pas ce genre d'artifice de positionnement css.

Version intégrale

Le site Syntaxe Markdown ne permet pas de contrôler la position d'une image.

En fait, il serait à la limite de la philosophie Markdown d'autoriser un tel formatage, comme le stipule la règle de l'art suivante "Philosophie" section

" Un document formaté en Markdown doit pouvoir être publié tel quel, en texte brut, sans avoir l'air d'avoir été balisé par des balises ou des instructions de formatage. "

Les fichiers Markdown sont rendus par le site web github.com grâce à l'utilisation de la technologie Ruby. Redcarpet bibliothèque.

Redcarpet expose certains extensions (comme le barré, par exemple) qui ne font pas partie de la syntaxe Markdown standard et offrent des "fonctionnalités" supplémentaires. Cependant, aucune extension supportée ne permet de centrer une image.

Answer 3

Alternativement, si vous avez le contrôle du css, vous pouvez faire preuve d'ingéniosité avec paramètres url et css .

Markdown :

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

Et CSS :

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

Vous pouvez créer une variété d'options de style de cette façon tout en conservant le code supplémentaire dans le format markdown. Bien sûr, vous n'avez aucun contrôle sur ce qui se passe si quelqu'un d'autre utilise le format markdown ailleurs, mais c'est un problème de style général avec tous les documents markdown que l'on partage.

Answer 4

Pour alignement à gauche

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

Pour bon alignement

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

Et pour alignement central

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

La fourchette ici pour des références futures, si vous trouvez cela utile.

Answer 5

Cela fonctionne pour moi sur github

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