Ich habe mir eine Weile die in GitHub verwendete Markdown-Syntax angesehen, aber abgesehen von der Größenänderung eines Bildes im Umfang der readme.md-Seite kann ich nicht herausfinden, wie ein Bild darin zentriert werden kann.

Ist es möglich? Wenn ja, wie?

Ich habe mir die in Github [...] verwendete Markdown-Syntax angesehen und kann nicht herausfinden, wie ein Bild zentriert werden 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 Fall von GitHub können Sie auf so etwas zurückgreifen <div style="text-align:center"><img src="..." /></div>. Beachten Sie, dass es keine Garantie dafür gibt, dass das Bild zentriert wird, wenn Ihr Repository in einer anderen Hosting-Umgebung (Codeplex, BitBucket, ...) gespalten ist oder wenn das Dokument nicht über einen Browser gelesen wird (Sublime Text Markdown-Vorschau, MarkdownPad, VisualStudio Web) Essentials Markdown Vorschau, ...).

Hinweis 2: Beachten Sie, dass selbst innerhalb der GitHub-Website die Art und Weise, wie Markdowns gerendert werden, nicht einheitlich ist. Das Wiki zum Beispiel lässt solche CSS-Positions-Tricks nicht zu.

Ungekürzte Version

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

Tatsächlich wäre es eine Grenze zur Markdown-Philosophie, eine solche Formatierung zuzulassen, wie im Abschnitt "Philosophie" angegeben

"Ein mit Markdown formatiertes Dokument sollte unverändert als einfacher Text veröffentlicht werden können, ohne dass es so aussieht, als wäre es mit Tags oder Formatierungsanweisungen gekennzeichnet."

Markdown-Dateien werden von der Website github.com mithilfe der Ruby Redcarpet- Bibliothek gerendert .

Redcarpet enthüllt einige Erweiterungen (z. B. 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.

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 rohes HTML-Tag 'img' verwenden und die Ausrichtung mit Inline durchführen CSS.

Prost,

So ist es 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-Repo nehmen . Am unteren Rand von README.md befindet sich ein zentriertes, ausgerichtetes Bild. Der Einfachheit halber können Sie einfach Folgendes tun:

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

Obwohl, wie nulltoken sagte, es gegen die Markdown-Philosophie grenzt!

Dieser Code aus meiner 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>

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

Wenn Sie die Kontrolle über das CSS haben, können Sie auch mit URL-Parametern und CSS klug werden .

Abschlag:

![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 Stiloptionen erstellen und den Abschlag dennoch von zusätzlichem Code reinigen. Natürlich haben Sie keine Kontrolle darüber, was passiert, wenn jemand anderes den Markdown woanders verwendet, aber das ist ein allgemeines Styling-Problem mit allen Markdown-Dokumenten, die man teilt.

Zur Linksausrichtung

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

Zur richtigen Ausrichtung

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

Und zur Mittelausrichtung

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

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

Es funktioniert bei mir auf Github

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

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

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

Um dem Bild eine zentrierte Beschriftung hinzuzufügen , 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.

Wir können das 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>

Um die Antwort ein wenig zu erweitern und lokale Bilder zu unterstützen, ersetzen FILE_PATH_PLACEHOLDER Sie einfach Ihren Bildpfad und überprüfen Sie ihn.

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

Gehen Sie einfach zur Readme.mdDatei 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 in die Seite und richtet es in der Mitte entsprechend den Abmessungen der Seite aus.

Meine Möglichkeit, 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" }

Das Bild wurde in der Größe geändert und richtig zentriert, zumindest in meinem lokalen VS-Markdown-Renderer.

Dann habe ich Änderungen an Repo vorgenommen und leider festgestellt, dass es für die Datei GitHub README.md nicht funktioniert . Trotzdem werde ich diese Antwort hinterlassen, da sie 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 styleAttribut ersetzt! Ich habe sogar classAttribut und mit dem gleichen Ergebnis versucht !

Dann habe ich folgende Kernseite gefunden, auf der noch mehr HTML der alten Schule verwendet wurde:

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

Dieser funktioniert gut, aber ich möchte ihn ohne weitere Kommentare belassen ...

Ein "reiner" Markdown-Ansatz, der dies handhaben kann, besteht darin, das Bild einer Tabelle hinzuzufügen und dann die Zelle zu zentrieren:

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

Es sollte HTML ähnlich wie folgt erzeugen:

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

TLDR;

Verwenden Sie dieses HTML / CSS, um ein Bild hinzuzufügen, zu zentrieren und seine Größe auf 60% der Bildschirmbreite in Ihrer Markdown-Datei festzulegen. Dies ist normalerweise ein guter Startwert:

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

Ändern Sie den widthCSS-Wert auf den gewünschten Prozentsatz oder entfernen Sie ihn ganz, um die Standardgröße für den Abschlag zu verwenden, die meiner Meinung nach 100% der Bildschirmbreite beträgt, wenn das Bild größer als der Bildschirm ist, oder ansonsten die tatsächliche Bildbreite.

Erledigt!

Oder lesen Sie weiter, um weitere Informationen zu erhalten.

Hier sind verschiedene HTML- und CSS-Optionen, die perfekt in Markdown-Dateien funktionieren:

1. Zentrieren und konfigurieren Sie (ändern Sie die Größe) ALLE Bilder in Ihrer Markdown-Datei:

Kopieren Sie diese einfach und fügen Sie sie oben in Ihre Markdown-Datei ein, um alle Bilder in der Datei zu zentrieren und ihre Größe zu ändern (und fügen Sie dann einfach alle gewünschten Bilder mit normaler Markdown-Syntax ein):

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

Oder hier ist derselbe Code wie oben, jedoch mit detaillierten HTML- und CSS-Kommentaren, um genau zu erklären, was los ist:

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

Nun, ob Sie ein Bild mit Markdown einfügen:

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

Oder HTML in Ihrer Markdown-Datei:

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

... wird automatisch zentriert und auf 60% der Breite der Bildschirmansicht dimensioniert, wie in den Kommentaren in HTML und CSS oben beschrieben. (Natürlich kann die Größe von 60% auch sehr leicht geändert werden, und ich stelle im Folgenden einfache Möglichkeiten vor, dies auch bildweise zu tun).

2. Zentrieren und konfigurieren Sie Bilder von Fall zu Fall nacheinander:

Unabhängig davon, ob Sie den obigen <style>Block kopiert und oben in Ihre Markdown-Datei eingefügt haben oder nicht , funktioniert dies auch, da er alle oben festgelegten Einstellungen für den Dateibereichsstil überschreibt und Vorrang vor diesen hat:

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

Sie können es auch in mehreren Zeilen formatieren, und es funktioniert weiterhin:

<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. Zusätzlich zu allen oben genannten, können Sie auch CSS - Stil erstellen Klassen , um Hilfe zu stilisieren Einzelbilder:

Fügen Sie diese ganze Sache oben in Ihre Markdown-Datei ein.

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

Jetzt hat Ihr imgCSS-Block die Standardeinstellung für zentrierte Bilder und 60% der Breite des Bildschirmbereichs festgelegt. Sie können jedoch die Klassen leftAlignund rightAlignCSS verwenden, um diese Einstellungen bildweise zu überschreiben.

Zum Beispiel ist dieses Bild mittig ausgerichtet und 60% groß (die Standardeinstellung, die ich oben festgelegt habe):

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

Dieses Bild wird jedoch linksbündig ausgerichtet , wobei der Text mit der oben erstellten leftAlignCSS-Klasse rechts umbrochen wird!

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

Es könnte so aussehen:

Sie können jedoch weiterhin alle CSS-Eigenschaften über das styleAttribut überschreiben , z. B. die Breite wie folgt:

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

Und jetzt bekommen Sie Folgendes:

4. Erstellen Sie 3 CSS-Klassen, ändern Sie jedoch nicht die imgMarkdown-Standardeinstellungen

Eine weitere Option zu dem, was wir oben gezeigt haben, wo wir die Standardeinstellungen geändert img property:valueund 2 Klassen erstellt haben, besteht darin, alle Standard-Markdown- imgEigenschaften in Ruhe zu lassen, aber 3 benutzerdefinierte CSS-Klassen wie folgt zu erstellen:

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

Verwenden Sie sie natürlich so:

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

Beachten Sie, wie ich die widthEigenschaft mithilfe des styleobigen CSS- Attributs manuell festgelegt habe. Wenn ich jedoch etwas Komplizierteres tun wollte, könnte ich auch einige zusätzliche Klassen wie diese erstellen und sie im <style>...</style>obigen Block hinzufügen :

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

Jetzt können Sie demselben Objekt mehrere Klassen zuweisen. Trennen Sie Klassennamen einfach durch ein Leerzeichen, NICHT durch ein Komma . Im Falle widersprüchlicher Einstellungen glaube ich, dass die zuletzt verwendete Einstellung diejenige ist, die wirksam wird und alle zuvor festgelegten Einstellungen überschreibt. Dies sollte auch der Fall sein, wenn Sie dieselben CSS-Eigenschaften mehrmals in derselben CSS-Klasse oder innerhalb desselben HTML- styleAttributs festlegen .

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

5. Konsolidieren Sie allgemeine Einstellungen in CSS-Klassen:

Der letzte Trick ist einer, den ich in dieser Antwort hier gelernt habe: Wie kann ich CSS verwenden, um mehrere Bilder unterschiedlich zu gestalten? . Wie Sie oben sehen können, setzen alle drei CSS- alignKlassen die Bildbreite auf 60%. Daher kann diese allgemeine Einstellung auf einmal wie folgt festgelegt werden. Anschließend können Sie die spezifischen Einstellungen für jede Klasse festlegen:

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

Mehr Details:

1. Meine Gedanken zu HTML und CSS in Markdown

Für mich ist alles, was in ein Markdown-Dokument geschrieben werden kann, um das gewünschte Ergebnis zu erzielen, alles, was wir suchen, nicht irgendeine "reine Markdown" -Syntax.

In C und C ++ wird der Compiler bis zum Assemblycode kompiliert, und die Assembly wird dann bis zum Binärcode zusammengesetzt. Manchmal benötigen Sie jedoch das Low-Level-Steuerelement, das nur Assembly bereitstellen kann, damit Sie Inline-Assemblys direkt in eine C- oder C ++ - Quelldatei schreiben können. Assembly ist die Sprache der "unteren Ebene" und kann direkt in C und C ++ geschrieben werden.

So ist es auch mit dem Abschlag. Markdown ist die Hochsprache, die bis zu HTML und CSS interpretiert wird. Wenn wir jedoch zusätzliche Kontrolle benötigen, können wir HTML und CSS auf niedrigerer Ebene direkt in unsere Markdown-Datei "einbinden", und es wird weiterhin korrekt interpretiert. In gewissem Sinne sind HTML und CSS daher eine gültige "Markdown" -Syntax.

Verwenden Sie HTML und CSS, um ein Bild in Markdown zu zentrieren.

2. Einfügen von Standardbildern in Markdown:

So fügen Sie ein Basisbild in Markdown mit der Standard-HTML- und CSS-Formatierung "hinter den Kulissen" hinzu:

Dieser Abschlag:

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

Wird diese Ausgabe erzeugen:

Dies ist mein Feuer schießender Hexacopter, den ich gemacht habe .

Optional können Sie auch eine Beschreibung in die öffnenden eckigen Klammern einfügen. Ehrlich gesagt bin ich nicht einmal sicher , was das tut, aber vielleicht wird es in ein umgewandelten HTML - <img>Element - altAttribut , das das Bild im Fall angezeigt wird kann nicht geladen werden , und kann von Screenreadern für Blinde gelesen werden. Also, dieser Abschlag:

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

wird auch diese Ausgabe erzeugen:

3. Weitere Details zu den Vorgängen in HTML / CSS beim Zentrieren und Ändern der Bildgröße in Markdown:

Um das Bild in Markdown zu zentrieren, müssen wir das zusätzliche Steuerelement verwenden, das HTML und CSS uns direkt geben können. Sie können ein einzelnes Bild wie folgt einfügen und zentrieren:

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

Hier gibt es mehr Infos. auf was hier los ist:

1. Der <imgTeil des obigen Codes ist das HTML " Start-Tag ", während das >am Ende das HTML " End-Tag " ist.
2. Alles vom Start-Tag bis zum End-Tag, einschließlich, macht dieses HTML- img" Element " aus.
3. HTML img "Tags" / "Elemente" werden verwendet, um Bilder in HTML einzufügen.
4. Jede der Zuweisungen innerhalb des Elements konfiguriert ein HTML- " Attribut ".
5. Das Attribut "style" akzeptiert das CSS-Styling , daher ist alles, was hier in doppelten Anführungszeichen style=""steht, eine CSS- property:valueSchlüsselwert- " Deklaration ".
   1. Beachten Sie, dass jede CSS- "Eigenschaft: Wertdeklaration" durch ein Semikolon ( ;) getrennt ist, während jedes HTML- "Attribut" in diesem "Element" durch ein Leerzeichen ( ) getrennt ist.
6. Damit das Bild in unserem obigen HTML- und CSS-Code zentriert wird, sind die wichtigsten "Attribute" einfach die srcund style.
7. Der alteine ist optional.
8. Innerhalb des HTML - styleAttribut, das CSS Styling übernimmt, sind die wichtigsten Erklärungen alle 4 , dass ich zeigen: display:block, float:none, margin-left:auto, und margin-right:auto.
   1. Wenn die float Eigenschaft zuvor noch nicht festgelegt wurde, können Sie diese Deklaration weglassen, aber es ist eine gute Idee, sie trotzdem für alle Fälle zu haben.
   2. Wenn Sie zuerst gelernt haben, wie Sie ein Bild mit HTML und CSS zentrieren, finden Sie hier: https://www.w3schools.com/howto/howto_css_image_center.asp .
9. CSS verwendet Kommentare im C-Stil ( /* my comment */).

Verweise:

1. Weitere Informationen zur CSS-Syntax finden Sie hier: https://www.w3schools.com/css/css_syntax.asp
2. Lesen Sie hier mehr über "HTML Tags vs Elements" .
3. Ich habe einen Großteil meiner HTML- und CSS-Styling-Übungen in meiner GitHub-Markdown-Readme-Datei hier durchgeführt: https://github.com/ElectricRCAircraftGuy/Arduino-STEM-Presentation
4. Ich habe fast alles gelernt, was ich über HTML und CSS weiß, indem ich auf w3schools.com herumgeklickt habe. Hier sind einige spezifische Seiten:
   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. HTML- und CSS-Kommentare: https://www.w3schools.com/css/css_comments.asp
5. Mein Feuer schießender Hexacopter, den ich gemacht habe: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html

Das ist wirklich ganz einfach.

-> This is centered Text <-

Wenn Sie dies berücksichtigen, können Sie dies auf die img-Syntax anwenden.

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