web-dev-qa-db-fra.com

github README.md center image

Je regarde la syntaxe de démarquage utilisée dans GitHub depuis un moment, mais à part le redimensionnement d'une image dans l'étendue de la page readme.md, je ne sais pas comment y centrer une image.

C'est possible? Si c'est le cas, comment?

githubmarkdown
281
Johnny Pauling

J'ai étudié la syntaxe de démarquage utilisée dans github [...], je ne vois pas comment centrer une image.

TL; DR

Non, vous ne pouvez pas seulement vous baser sur la syntaxe Markdown. Markdown ne se soucie pas du positionnement.

Remarque: Certains processeurs de démarques prennent en charge l'inclusion de HTML (comme justement souligné par @ waldyr.ar), et dans le cas GitHub, vous pouvez vous replier sur quelque chose comme <div style="text-align:center"><img src="..." /></div>. Attention, rien ne garantit que l'image sera centrée si votre référentiel est créé dans un environnement d'hébergement différent (Codeplex, BitBucket, ...) ou si le document n'est pas lu via un navigateur (aperçu Sublime Text Markdown, MarkdownPad, VisualStudio Web Aperçu de Essentials Markdown, ...).

Note 2: Gardez à l'esprit que même sur le site Web de GitHub, la manière dont le décompte est rendu n'est pas uniforme. Le wiki, par exemple, ne permettra pas une telle astuce de positionnement css.

Version intégrale

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

En fait, il serait contraire à la philosophie de Markdown d'autoriser un tel formatage, comme indiqué dans la section "Philosophie"

"Un document au format Markdown doit pouvoir être publié tel quel, en texte brut, sans ressembler à ce qui a été marqué avec des balises ou des instructions de formatage."

Les fichiers de démarques sont rendus par le site Web github.com à l’aide de la bibliothèque Ruby Redcarpet.

Redcarpet expose certaines extensions (telles que le barré, par exemple) qui ne font pas partie de la syntaxe standard de Markdown et fournissent des "fonctionnalités supplémentaires ". Cependant, aucune extension prise en charge ne vous permet de centrer une image.

131
nulltoken

Ceci est du soutien de Github:

Hé Waldyr,

Markdown ne vous permet pas d’ajuster directement l’alignement (voir la documentation ici: http://daringfireball.net/projects/markdown/syntax#img ), mais vous pouvez simplement utiliser un 'HTML brut' tag et faire l'alignement avec css en ligne.

À votre santé,

Donc il est possible d'aligner des images! Il vous suffit d'utiliser des CSS en ligne pour résoudre le problème. Vous pouvez prendre un exemple de mon repo github . Au bas de README.md se trouve une image centrée alignée. Pour simplifier, vous pouvez simplement procéder comme suit:

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

Bien que, comme nulltoken l’ait dit, cela serait à la limite de la philosophie de Markdown!

523
waldyr.ar

Alternativement, si vous avez le contrôle du css, vous pourriez être malin avec paramètres d'url et css .

Réduction:

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

Et CSS:

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

Vous pouvez créer diverses options de style de cette manière tout en maintenant le code vierge propre. Bien sûr, vous n'avez aucun contrôle sur ce qui se passe si quelqu'un d'autre utilise le démarquage ailleurs, mais c'est un problème de style général avec tous les documents de démarquage que l'on partage.

34
cyberwombat

Cela fonctionne pour moi sur github

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

Pour alignement à gauche 

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

Pour alignement à droite 

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

Et pour le centrage

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

Posez-le ici pour les références futures, si cela vous semble utile.

17
iNet

Vous pouvez également redimensionner l’image à la taille souhaitée largeur et hauteur. Par exemple:

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

Pour ajouter un légende à l'image, il suffit d'une ligne supplémentaire:

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

Heureusement, cela fonctionne à la fois pour les pages README.md et GitHub Wiki.

8
khyox

Nous pouvons utiliser cela. Modifiez l'emplacement de urrg dans le dossier git et ajoutez un texte de remplacement si img n'est pas chargé.

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

Pour étendre un peu la réponse afin de prendre en charge les images locales, il suffit de remplacerFILE_PATH_PLACEHOLDER dans votre chemin d’image et de le vérifier.

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

Ma façon de résoudre le problème de positionnement d’image a été d’utiliser les attributs HTML:

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

L'image a été redimensionnée et centrée correctement, du moins dans mon moteur de rendu Markdown VS local.

Ensuite, j’ai poussé les changements vers le repo et j’ai malheureusement réalisé que cela ne fonctionnait pas pour le fichier GitHub README.md . Néanmoins, je laisserai cette réponse car cela pourrait aider quelqu'un d'autre.

Donc finalement, j'ai fini par utiliser une bonne vieille balise HTML:

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

Mais devinez quoi? Une méthode JS a remplacé mon attribut style! J'ai même essayé l'attribut class et avec le même résultat!

Ensuite, j'ai trouvé ce qui suit page Gist où encore plus de HTML à l'ancienne a été utilisé:

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

Celui-ci fonctionne bien cependant, je voudrais le laisser sans autres commentaires ...

2
Gucu112