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

Ein "reiner" Markdown-Ansatz, der dies bewältigen kann, ist das Hinzufügen des Bildes zu einer Tabelle und das anschließende Zentrieren der Zelle:

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

Das Ergebnis sollte HTML ähnlich wie dieses sein:

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

Answer 2

Tabelle Ansatz

Ein anderer Ansatz ist die Verwendung einer Tabelle.

<table>
  <tr>
    <td valign="center">
      <span style="margin-bottom: 10px;"> Some Text </span>
    </td>
    <td valign="center">
      <img src="https://github-readme-stats.vercel.app/api?username=hossein13m&show_icons=true&title_color=ffffff&icon_color=34abeb&text_color=daf7dc&bg_color=151515"/>
    </td>
  </tr>
</table>

Bitte beachten Sie dass dies bei den Readme-Dateien auf GitHub funktioniert, aber nicht bei den Codeschnipseln hier auf StackOverflow.

Answer 3

Ich habe eine Lösung für Github gefunden, die die Verwendung des veralteten align Attribut. Es vermeidet auch die Notwendigkeit, mit &nbsp zu füllen. Ich habe eine transparente 1920x5 line.png mit width="100%" und machte daraus die letzte Zeile jeder Spalte. Dadurch wird jede Spalte gleichmäßig beabstandet.

||
|:--:|
| <img width=200px src="image.png" alt="image alt text"> |
| <img width="100%" src="line.png"> |

Answer 4

Si das Bild zu ändern kein Problem für Sie ist und

wenn Sie kennen die ungefähre Breite des Containers die Ihr Markdown anzeigen wird, und

wenn Ihr Bild wird nur an einer Stelle verwendet (zum Beispiel eine README, die nur in GitHub verwendet wird),

dann können Sie Ihr Bild in einem Bildbearbeitungsprogramm bearbeiten und es auf beiden Seiten gleichmäßig auffüllen.

Vor der Polsterung:

Nach dem Auffüllen:

Originalbild (Breite = 250px):

Gefülltes Bild (Breite = 660px):

Answer 5

Ich weiß nicht, warum niemand etwas über die <center> Tag. beziehen doc für weitere Lektüre.

<center>
    <h1>Hola App</h1> 
    <img src="root/static/assets/img/beer.svg">
</center>