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

Dies ist vom GitHub-Support:

Mit Markdown können Sie die Ausrichtung nicht direkt ändern (siehe Dokumente hier: http://daringfireball.net/projects/markdown/syntax#img ), aber Sie können auch einfach ein rohes HTML-'img'-Tag verwenden und die Ausrichtung mit Inline-CSS vornehmen.

Also es ist möglich, Bilder auszurichten! Sie müssen nur Inline-CSS verwenden, um das Problem zu lösen. Sie können ein Beispiel aus meinem GitHub-Repository . Am Ende von README.md befindet sich ein zentriert ausgerichtetes Bild. Der Einfachheit halber können Sie einfach wie folgt vorgehen:

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

Obwohl, wie nulltoken sagte wäre das ein Verstoß gegen die Markdown-Philosophie!

---

Dieser Code aus meine README-Datei :

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

Es erzeugt diese Bildausgabe, außer zentriert, wenn sie auf GitHub angezeigt wird:

<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

Ich habe mir die in GitHub verwendete Markdown-Syntax angesehen [...], ich kann nicht herausfinden, wie man ein Bild zentriert

TL;DR

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

Nota: Einige Markdown-Prozessoren unterstützen die Einbindung von HTML (wie von @waldyr.ar zu Recht hervorgehoben), und im Fall von GitHub können Sie auf etwas zurückgreifen wie <div style="text-align:center"><img src="..." /></div> .

Beachten Sie, dass es keine Garantie gibt, dass das Image zentriert wird, wenn Ihr Repository in einer anderen Hosting-Umgebung geforkt wird ( CodePlex , Bitbucket , usw.) oder wenn das Dokument nicht über einen Browser gelesen wird ( Erhabener Text Markdown-Vorschau, MarkdownPad, Visual Studio Web Essentials Markdown-Vorschau, ...).

Anmerkung 2: Beachten Sie, dass selbst innerhalb der GitHub-Website die Darstellung von Markdown nicht einheitlich ist. Das Wiki zum Beispiel lässt solche CSS-Positionstricks nicht zu.

Ungekürzte Fassung

Les Markdown-Syntax bietet nicht die Möglichkeit, die Position eines Bildes zu kontrollieren.

In der Tat wäre es grenzwertig gegen die Markdown-Philosophie, solche Formatierungen zu erlauben, wie in der " Philosophie " Abschnitt.

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

Markdown-Dateien werden von der github.com-Website durch die Verwendung des Ruby Roter Teppich Bibliothek.

Redcarpet entlarvt einige Erweiterungen (wie z. B. Durchstreichen), die nicht Teil der Standard-Syntax von Markdown sind und zusätzliche "Funktionen" bieten. Keine der unterstützten Erweiterungen ermöglicht es jedoch, ein Bild zu zentrieren.

Answer 3

Wenn Sie die Kontrolle über den CSS-Inhalt haben, können Sie alternativ die folgenden Möglichkeiten nutzen URL-Parameter und CSS .

Markdown:

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

Und CSS:

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

Auf diese Weise können Sie eine Vielzahl von Styling-Optionen erstellen und trotzdem den Markdown-Inhalt von zusätzlichem Code freihalten. Natürlich haben Sie keine Kontrolle darüber, was passiert, wenn jemand anderes die Markdown-Datei an anderer Stelle verwendet, aber das ist ein allgemeines Styling-Problem bei allen Markdown-Dokumenten, die man gemeinsam nutzt.

Answer 4

Für linke Ausrichtung

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

Für richtige Ausrichtung

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

Und für mittige Ausrichtung

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

Fork it aquí für zukünftige Referenzen, falls Sie dies nützlich finden.

Answer 5

Es funktioniert für mich auf GitHub

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