webentwicklung-frage-antwort-db.com.de

github README.md Bildmitte

Ich habe mich eine Weile mit der in GitHub verwendeten Markdown-Syntax beschäftigt, aber abgesehen von der Größenänderung eines Bilds auf die Größe der readme.md-Seite kann ich nicht herausfinden, wie ein Bild darin zentriert wird.

Ist es möglich? Wenn ja, wie?

281
Johnny Pauling

Ich habe mir die in Github verwendete [...] Markdown-Syntax angesehen und weiß nicht, wie ich ein Bild zentrieren soll

TL; DR

Nein, Sie können sich nicht nur auf die Markdown-Syntax verlassen. Markdown kümmert sich nicht um die Positionierung.

Hinweis: Einige Markdown-Prozessoren unterstützen die Aufnahme von HTML (wie von @ waldyr.ar zu Recht hervorgehoben), und im GitHub-Fall können Sie auf etwas wie <div style="text-align:center"><img src="..." /></div> Zurückgreifen. Beachten Sie, dass es keine Garantie gibt, dass das Bild zentriert wird, wenn sich Ihr Repository in einer anderen Host-Umgebung befindet (Codeplex, BitBucket, ...) oder wenn das Dokument nicht über einen Browser gelesen wird (Sublime Text Markdown Preview, MarkdownPad, VisualStudio Web) Essentials Markdown Vorschau, ...).

Anmerkung 2: Beachten Sie, dass die Art und Weise, in der Markdowns gerendert werden, auch innerhalb der GitHub-Website nicht einheitlich ist. Das Wiki zum Beispiel lässt solche CSS-Positionstricks nicht zu.

Ungekürzte Fassung

Die Markdown-Syntax bietet nicht die Möglichkeit, die Position eines Bildes zu steuern.

Tatsächlich würde es der Markdown-Philosophie zuwiderlaufen, eine solche Formatierung zuzulassen, wie im Abschnitt "Philosophie" angegeben

"Ein mit Markdown formatiertes Dokument sollte als normaler Text veröffentlicht werden können, ohne dass es aussieht, als wäre es mit Tags oder Formatierungsanweisungen versehen."

Markdown-Dateien werden von der Website github.com unter Verwendung der Zeichen Ruby Redcarpet gerendert. Bibliothek.

Redcarpet enthüllt einige Erweiterungen (wie zum Beispiel durchgestrichen), die nicht Teil der Standard-Markdown-Syntax sind und zusätzliche "Funktionen bieten ". Mit keiner unterstützten Erweiterung können Sie jedoch ein Bild zentrieren.

131
nulltoken

Dies ist von Githubs Unterstützung:

Hey Waldyr,

Mit Markdown können Sie die Ausrichtung nicht direkt optimieren (siehe Dokumente hier: http://daringfireball.net/projects/markdown/syntax#img ), aber Sie können einfach ein unformatiertes HTML 'img' verwenden. taggen und ausrichten mit Inline CSS.

Prost,

Es ist also möglich, Bilder auszurichten! Sie müssen nur Inline-CSS verwenden, um das Problem zu lösen. Sie können ein Beispiel von meinem Github Repo nehmen. Unten in README.md befindet sich ein zentriertes, ausgerichtetes Bild. Der Einfachheit halber können Sie wie folgt vorgehen:

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

Obwohl, wie nulltoken sagte, es gegen die Markdown-Philosophie grenzen würde!

523
waldyr.ar

Wenn Sie die Kontrolle über das CSS haben, können Sie auch mit RL-Parameter und CSS clever werden.

Abschrift:

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

Und CSS:

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

Sie können auf diese Weise eine Vielzahl von Stiloptionen erstellen und den Markdown trotzdem frei von zusätzlichem Code halten. Natürlich haben Sie keine Kontrolle darüber, was passiert, wenn jemand anders den Markdown an einer anderen Stelle verwendet. Dies ist jedoch ein allgemeines Stilproblem, das bei allen Markdown-Dokumenten auftritt, die einer teilt.

34
cyberwombat

Es funktioniert bei mir auf Github

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

Für linke Ausrichtung

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

Für die rechte Ausrichtung

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

Und zur Mittenausrichtung

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

Fork it hier für zukünftige Referenzen, wenn Sie dies nützlich finden.

17
iNet

Sie können das Bild auch auf die gewünschte Größe einstellen Breite und Höhe. Zum Beispiel:

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

Um dem Bild ein zentriertes Bildunterschrift hinzuzufügen, genügt eine weitere 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.

8
khyox

Das können wir nutzen. Bitte ändern Sie den src-Speicherort von ur img aus dem Git-Ordner und fügen Sie alternativen Text hinzu, wenn img nicht geladen ist

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

Um die Antwort ein wenig zu erweitern, um lokale Bilder zu unterstützen, einfach ErsetzenFILE_PATH_PLACEHOLDER zu deinem Bildpfad und überprüfe ihn.

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

Mein Weg, um das Problem mit der Bildpositionierung zu lösen, bestand darin, die HTML-Attribute zu verwenden:

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

Die Größe des Bildes wurde korrekt angepasst und zentriert, zumindest in meinem lokalen VS-Markdown-Renderer.

Dann habe ich Änderungen an repo gepusht und leider festgestellt, dass es nicht für GitHub README.md funktioniert . Trotzdem werde ich diese Antwort belassen, da es jemand anderem helfen könnte.

Schließlich habe ich stattdessen ein gutes altes HTML-Tag verwendet:

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

Aber rate mal was? Eine JS-Methode hat mein style -Attribut ersetzt! Ich habe sogar das class Attribut ausprobiert und mit dem gleichen Ergebnis!

Dann habe ich folgendes gefunden Gist-Seite wo noch mehr Old-School-HTML verwendet wurde:

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

Dieser funktioniert gut, aber ich möchte es ohne weitere Kommentare verlassen ...

2
Gucu112