Bild zentrieren Markdown
Markdown ist im Volksmund als leichtgewichtige Auszeichnungssprache
bekannt, die mit Hilfe einer Texteditoranwendung Formatierungselemente in einfache Textdokumente einfügt. Es wurde 2004 von John Gruber
gegründet.
Diese Sprache ist inzwischen zur weltweit gefragtesten Auszeichnungssprache geworden. Wir finden mittlerweile viele webbasierte Anwendungen, die besonders zum Schreiben in Markdown genutzt werden.
Markdown ist etwas anders als ein WYSIWYG
-Editor. Wie in Microsoft Word
zum Formatieren von Wörtern und Sätzen zu sehen, klicken wir auf Schaltflächen, um die Änderungen sofort zu sehen.
Aber Markdown folgt dem nicht. Wenn wir in Markdown eine Datei im Markdown-Format entwickeln, spezifiziert die Markdown-Syntax einige Wörter und Ausdrücke, die im Text anders sein sollten.
In diesem Artikel wird erläutert, wie Sie ein Bild in unserer Markdown-Datei zentrieren. Beispielsweise wird die Datei README.md
im Stammverzeichnis eines Open-Source-Projekts im Browser als HTML angezeigt.
Bilder in Markdown ausrichten
Markdown bietet eine sehr einfache Möglichkeit, Inhalte zu schreiben, ohne den Overhead der Formatierung mit einem WYSIWYG
-Editor zu verwenden.
Das Schreiben von Text in Markdown geht schnell, aber was ist mit dem Ausrichten von Bildern?
Markdown-Bild-Tags selbst haben keine Ausrichtungseigenschaften, was sehr ärgerlich ist, wenn wir unsere README.md
-Datei auf Github formatieren.
<!-- No alignment options -->
(/myimages/mylogo.png)
Glücklicherweise gibt es einen Ausweg für dieses Problem. Wir werden html
-Bild-Tags verwenden, um unsere Dokumente mit dem img
-Tag in HTML zu verbessern.
.md
ist die markdown
-Erweiterung, die uns mitteilt, dass README.md
eine Markdown-Datei ist. Diese Datei wird verwendet, um die html
-Zusammenfassung zu erstellen, die wir am Ende unserer Projekte sehen.
<img align="right" width="120" height="120" src="https://www.pexels.com/photo/photo-of-grey-tabby-kitten-lying-down-2558605/">
Zentrierte Ausrichtung in Markdown
Die Zentrierung im Markdown ist etwas schwierig. Wie unten gezeigt, müssen wir das img
-Tag in ein p
-Tag packen.
<p align="center">
<img width="460" height="300" src="https://www.pexels.com/photo/photo-of-grey-tabby-kitten-lying-down-2558605/">
</p>
Abdul is a software engineer with an architect background and a passion for full-stack web development with eight years of professional experience in analysis, design, development, implementation, performance tuning, and implementation of business applications.
LinkedIn