Wie kann ich ein Bild in der README.md-Datei auf GitHub zentrieren?

Question

Ich habe mir die Markdown-Syntax, die in GitHub verwendet wird, eine Weile angeschaut, aber außer der Größenanpassung eines Bildes an die Breite der README.md Seite kann ich nicht herausfinden, wie ich ein Bild darin zentrieren kann.

Ist dies möglich? Wenn ja, wie kann ich es tun?

Answer 1

Wir können das Folgende verwenden. Bitte ändern Sie die src Speicherort Ihres Bildes aus dem Git-Ordner und fügen Sie den alternativen Text hinzu, wenn das Bild nicht geladen wird:

 <p align="center">
    <img src="your image URL here" alt="alternate text">
 </p>

Answer 2

Das Problem mit der Bildpositionierung konnte ich durch die Verwendung von HTML-Attributen lösen:

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

Das Bild wurde in der Größe angepasst und richtig zentriert, zumindest in meinem lokalen Visual Studio Community Markdown Renderer.

Dann habe ich Änderungen an das Repository übertragen und leider festgestellt, dass es funktioniert nicht für GitHub README.md-Datei . Trotzdem werde ich diese Antwort hier lassen, da sie vielleicht jemand anderem hilft.

Deshalb habe ich schließlich den guten alten HTML-Tag verwendet:

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

Aber wissen Sie was? Eine JavaScript-Methode hat meine style Attribut! Ich habe sogar versucht class und mit demselben Ergebnis!

Dann habe ich folgendes gefunden Gist-Seite wo noch mehr HTML der alten Schule verwendet wurde:

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

Diese funktioniert jedoch einwandfrei, und ich möchte sie ohne weitere Kommentare stehen lassen...

Answer 3

Sie können auch die Größe des Bildes auf die gewünschte Breite y Höhe . Zum Beispiel:

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

So fügen Sie eine zentrierte Bildunterschrift zum Bild, nur noch eine Zeile:

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

Glücklicherweise funktioniert dies sowohl für README.md als auch für die GitHub Wiki-Seiten.

Answer 4

Gehen Sie einfach zum Readme.md Datei und verwenden Sie diesen 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> passt alles auf die Seite und richtet es entsprechend den Abmessungen der Seite mittig aus.

Answer 5

Um die Antwort ein wenig zu erweitern und lokale Bilder zu unterstützen, müssen Sie nur ersetzen. FILE_PATH_PLACEHOLDER mit Ihrem Bildpfad und überprüfen Sie es.

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