Je regarde la syntaxe de démarquage utilisée dans GitHub depuis un certain temps, mais à part redimensionner une image dans la mesure de la page readme.md, je ne peux pas comprendre comment centrer une image dedans.

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

J'ai regardé la syntaxe de démarque utilisée dans github, [...] je ne sais pas comment centrer une image

TL; DR

Non, vous ne pouvez pas le faire en vous basant uniquement sur la syntaxe Markdown. Markdown ne se soucie pas du positionnement.

Remarque: Certains processeurs de démarque prennent en charge l'inclusion de HTML (comme souligné à juste titre par @ waldyr.ar), et dans le cas GitHub, vous pouvez revenir à 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 bifurqué 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 d'Essentials Markdown, ...).

Remarque 2: Gardez à l'esprit que même sur le site Web GitHub, la façon dont le démarque est rendu n'est pas uniforme. Le wiki, par exemple, ne permettra pas une telle ruse positionnelle CSS.

Version intégrale

La syntaxe Markdown ne donne pas la possibilité de contrôler la position d'une image.

En fait, il serait limite par rapport à la philosophie Markdown de permettre une telle mise en forme, comme indiqué dans la section "Philosophie"

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

Les fichiers de démarque sont rendus par le site Web github.com grâce à l'utilisation de la bibliothèque Ruby Redcarpet .

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

Ceci est du support de Github:

Salut Waldyr,

Markdown ne vous permet pas de modifier directement l'alignement (voir les documents ici: http://daringfireball.net/projects/markdown/syntax#img ), mais vous pouvez simplement utiliser une balise HTML 'img' brute et faire l'alignement avec inline css.

À votre santé,

Il est donc possible d'aligner les images! Il vous suffit d'utiliser le 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 alignée centrée. Pour plus de simplicité, vous pouvez simplement procéder 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 mon 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>

Produit cette sortie d'image, sauf centrée lorsqu'elle est vue sur GitHub:

Alternativement, si vous avez le contrôle du CSS, vous pouvez devenir intelligent avec les paramètres d'URL et le 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 une variété d'options de style de cette façon et garder le démarquage propre du code supplémentaire. Bien sûr, vous n'avez aucun contrôle sur ce qui se passe si quelqu'un d'autre utilise le démarque ailleurs, mais c'est un problème de style général avec tous les documents de démarque qu'un partage.

Pour alignement à gauche

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

Pour un alignement correct

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

Et pour l'alignement central

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

Forkez-le ici pour de futures références, si vous trouvez cela utile.

Ça marche pour moi sur github

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

Vous pouvez également redimensionner l'image à la largeur et à la hauteur souhaitées . Par exemple:

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

Pour ajouter une légende centrée à l'image, une seule ligne de plus:

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

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

Nous pouvons l'utiliser. Veuillez modifier l'emplacement src d'ur img à partir du dossier git et ajouter un texte alternatif si img n'est pas chargé

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

Accédez simplement au Readme.mdfichier et utilisez ce code.

<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> s'adapte à tout dans la page et le centre l'aligne selon les dimensions de la page.

Pour étendre un peu la réponse pour prendre en charge les images locales, remplacez simplement FILE_PATH_PLACEHOLDERvotre chemin d'image et vérifiez-le.

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

Ma façon de résoudre le problème avec le positionnement de l'image était 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, au moins dans mon rendu de démarque VS local.

Ensuite, j'ai poussé les modifications au référentiel et malheureusement réalisé que cela ne fonctionne pas pour le fichier GitHub README.md . Néanmoins, je laisserai cette réponse car elle pourrait aider quelqu'un d'autre.

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

<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 styleattribut! J'ai même essayé l' classattribut et avec le même résultat!

Ensuite, j'ai trouvé la page essentielle suivante 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 autre commentaire ...

TLDR;

Utilisez ce code HTML / CSS pour ajouter et centrer une image et définir sa taille à 60% de la largeur de l'espace d'écran à l'intérieur de votre fichier de démarque, ce qui est généralement une bonne valeur de départ:

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

Modifiez la widthvaleur CSS en pourcentage que vous souhaitez, ou supprimez-le complètement pour utiliser la taille par défaut de démarque, qui je pense est de 100% de la largeur de l'écran si l'image est plus grande que l'écran, ou c'est la largeur réelle de l'image sinon.

Terminé!

Ou continuez à lire pour plus d'informations.

Voici différentes options HTML et CSS qui fonctionnent parfaitement dans les fichiers de démarques:

1. Centrez et configurez (redimensionnez) TOUTES les images dans votre fichier de démarque:

Copiez et collez simplement cela en haut de votre fichier de démarque pour centrer et redimensionner toutes les images du fichier (puis insérez simplement les images que vous voulez avec la syntaxe de démarque normale):

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

Ou, voici le même code que ci-dessus mais avec des commentaires HTML et CSS détaillés pour expliquer exactement ce qui se passe:

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

Maintenant, si vous insérez une image à l'aide de démarque:

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

Ou HTML dans votre fichier de démarque:

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

... il sera automatiquement centré et dimensionné à 60% de la largeur de la vue d'écran, comme décrit dans les commentaires HTML et CSS ci-dessus. (Bien sûr, la taille de 60% est également très facilement modifiable, et je présente ci-dessous des moyens simples de le faire image par image également).

2. Centrez et configurez les images au cas par cas: une par une:

Que vous ayez ou non copié et collé le <style>bloc ci-dessus dans le haut de votre fichier de démarque, cela fonctionnera également, car il remplace et prévaut sur tous les paramètres de style de portée de fichier que vous avez définis ci-dessus:

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

Vous pouvez également le formater sur plusieurs lignes, comme ceci, et cela fonctionnera toujours:

<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. En plus de tout ce qui précède, vous pouvez également créer des classes de style CSS pour aider à styliser des images individuelles:

Ajoutez tout cela en haut de votre fichier de démarque.

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

Maintenant, votre imgbloc CSS a défini le paramètre par défaut pour que les images soient centrées et 60% de la largeur de l'espace d'écran en taille, mais vous pouvez utiliser les classes leftAlignet rightAlignCSS pour remplacer ces paramètres image par image.

Par exemple, cette image sera alignée au centre et d'une taille de 60% (la valeur par défaut que j'ai définie ci-dessus):

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

Cette image sera cependant alignée à gauche , avec un habillage de texte à sa droite, en utilisant la leftAlignclasse CSS que nous venons de créer ci-dessus!

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

Cela pourrait ressembler à ceci:

Cependant, vous pouvez toujours remplacer l'une de ses propriétés CSS via l' styleattribut , comme la largeur, comme ceci:

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

Et maintenant, vous obtiendrez ceci:

4. Créez 3 classes CSS, mais ne modifiez pas les imgvaleurs par défaut de démarque

Une autre option pour ce que nous venons de montrer ci-dessus, où nous avons modifié les img property:valueparamètres par défaut et créé 2 classes, est de laisser toutes les imgpropriétés de démarquage par défaut , mais de créer 3 classes CSS personnalisées, comme ceci:

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

Utilisez-les, bien sûr, comme ceci:

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

Remarquez comment j'ai défini manuellement la widthpropriété en utilisant l' styleattribut CSS ci-dessus, mais si j'avais quelque chose de plus compliqué que je voulais faire, je pouvais également créer des classes supplémentaires comme celle-ci, en les ajoutant à l'intérieur du <style>...</style>bloc ci-dessus:

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

Vous pouvez maintenant affecter plusieurs classes au même objet, comme ceci. Séparez simplement les noms de classe par un espace, PAS par une virgule . En cas de paramètres conflictuels, je crois que celui qui vient en dernier sera celui qui prendra effet, remplaçant tous les paramètres précédemment définis. Cela devrait également être le cas si vous définissez plusieurs fois les mêmes propriétés CSS dans la même classe CSS ou dans le même styleattribut HTML .

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

5. Consolider les paramètres communs dans les classes CSS:

La dernière astuce est celle que j'ai apprise dans cette réponse ici: Comment puis-je utiliser CSS pour styliser plusieurs images différemment? . Comme vous pouvez le voir ci-dessus, les 3 alignclasses CSS définissent la largeur de l'image à 60%. Par conséquent, ce paramètre commun peut être défini d'un seul coup comme ceci si vous le souhaitez, vous pouvez ensuite définir les paramètres spécifiques pour chaque classe:

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

Plus de détails:

1. Mes réflexions sur HTML et CSS dans Markdown

En ce qui me concerne, tout ce qui peut être écrit dans un document de démarque et obtenir le résultat souhaité est tout ce que nous recherchons, pas une syntaxe de «pure démarque».

En C et C ++, le compilateur se compile en code assembleur, et l'assembly est ensuite assemblé en binaire. Parfois, cependant, vous avez besoin du contrôle de bas niveau que seul l'assembly peut fournir, et vous pouvez donc écrire l'assembly inline directement à l'intérieur d'un fichier source C ou C ++. L'assemblage est le langage de "niveau inférieur" et il peut être écrit directement en C et C ++.

C'est donc avec démarque. Markdown est le langage de haut niveau interprété en HTML et CSS. Cependant, là où nous avons besoin d'un contrôle supplémentaire, nous pouvons simplement "inline" le HTML et CSS de bas niveau juste à l'intérieur de notre fichier de démarque, et il sera toujours interprété correctement. Dans un sens, par conséquent, HTML et CSS sont une syntaxe de «démarquage» valide.

Donc, pour centrer une image dans une démarque, utilisez HTML et CSS.

2. Insertion d'image standard dans le démarque:

Comment ajouter une image de base dans le démarquage avec un formatage HTML et CSS par défaut "en coulisses":

Cette démarque:

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

Produira cette sortie:

Voici mon hexacoptère de tir que j'ai fabriqué .

Vous pouvez également éventuellement ajouter une description dans les crochets d'ouverture. Honnêtement, je ne suis même pas sûr de ce que cela fait, mais peut-être qu'il est converti en un attribut d' élément HTML<img>alt , qui s'affiche au cas où l'image ne peut pas se charger, et peut être lu par les lecteurs d'écran pour les aveugles. Donc, cette démarque:

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

produira également cette sortie:

3. Plus de détails sur ce qui se passe dans le HTML / CSS lors du centrage et du redimensionnement d'une image dans le démarque:

Le centrage de l'image dans la démarque nécessite que nous utilisions le contrôle supplémentaire que HTML et CSS peuvent nous donner directement. Vous pouvez insérer et centrer une image individuelle comme ceci:

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

Voici plus d'informations. sur ce qui se passe ici:

1. La <imgpartie du code ci-dessus est la " balise de début " HTML , tandis >qu'à la fin est la " balise de fin " HTML .
2. Tout, de la balise de début à la balise de fin, inclus, constitue cet img" élément " HTML .
3. Les img "balises" / "éléments" HTML sont utilisés pour insérer des images dans HTML.
4. Chacune des affectations à l'intérieur de l'élément configure un " attribut " HTML .
5. L' attribut "style" accepte le style CSS , donc tout ce qui se trouve entre les guillemets doubles ici: style=""est une property:value" déclaration " de valeur-clé CSS .
   1. Notez que chaque "propriété: déclaration de valeur" CSS est séparée par un point-virgule ( ;), tandis que chaque "attribut" HTML dans cet "élément" est séparé par un espace ( ).
6. Pour que l'image soit centrée dans notre code HTML et CSS ci-dessus, les "attributs" clés sont simplement les srcet style.
7. Celui- altci est facultatif.
8. A l' intérieur du HTML styleattribut, qui accepte le style CSS, les principales déclarations sont 4 que je montre: display:block, float:none, margin-left:autoet margin-right:auto.
   1. Si rien n'a déjà défini la float propriété auparavant, vous pouvez laisser cette déclaration, mais c'est une bonne idée de l'avoir quand même au cas où.
   2. Si vous avez d'abord appris à centrer une image à l'aide de HTML et CSS ici: https://www.w3schools.com/howto/howto_css_image_center.asp .
9. CSS utilise des commentaires de style C ( /* my comment */).

Références:

1. En savoir plus sur la syntaxe CSS ici: https://www.w3schools.com/css/css_syntax.asp
2. Pour en savoir plus sur les «balises HTML vs éléments», cliquez ici .
3. J'ai fait une grande partie de ma pratique de style HTML et CSS dans mon fichier Lisez-moi de démarque GitHub ici: https://github.com/ElectricRCAircraftGuy/Arduino-STEM-Presentation
4. J'ai appris à peu près tout ce que je sais sur HTML et CSS en cliquant sur w3schools.com. Voici quelques pages spécifiques:
   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. Commentaires HTML et CSS: https://www.w3schools.com/css/css_comments.asp
5. Mon hexacoptère de tir de feu que j'ai fait: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html

Une approche de marquage "pure" qui peut gérer cela consiste à ajouter l'image à un tableau puis à centrer la cellule:

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

Il devrait produire du HTML similaire à ceci:

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

C'est vraiment très simple.

-> This is centered Text <-

Donc, en gardant cela à l'esprit, vous pouvez appliquer cela à la syntaxe img.

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