Markdown et alignement des images

Question

Je suis en train de créer un site qui publie des articles par numéro chaque mois. C'est simple, et je pense que l'utilisation d'un éditeur Markdown (comme le ADM un ici dans Stack Overflow) serait parfait.

Cependant, ils ont besoin de la possibilité d'aligner les images à droite dans un paragraphe donné. .

Je ne vois pas de moyen de le faire avec le système actuel - est-ce possible ?

Answer 1

Comme Greg a déclaré vous pouvez intégrer du contenu HTML dans le format Markdown, mais l'un des avantages du format Markdown est qu'il permet d'éviter d'avoir des connaissances approfondies (ou n'importe lesquelles, d'ailleurs) en matière de balisage CSS/HTML, n'est-ce pas ? C'est ce que je fais :

Dans mon fichier Markdown, je demande simplement à tous mes rédacteurs wiki d'envelopper toutes les images avec quelque chose qui ressemble à ceci :

'<div> // Put image here  </div>`

(bien sûr ils ne savent pas ce que <div> mais cela ne devrait pas avoir d'importance)

Donc le fichier Markdown ressemble à ça :

<div>
![optional image description][1]
</div>

[1]: /image/path

Et dans le contenu CSS qui englobe toute la page, je peux faire ce que je veux avec la balise image :

img {
   float: right;
}

Bien sûr, vous pouvez faire plus avec le contenu du CSS... (dans ce cas particulier, en enveloppant l'élément img avec div empêche les autres textes de s'enrouler autour de l'image... ce n'est qu'un exemple, cependant), mais, à mon avis, l'intérêt de la balise Markdown c'est que vous ne voulez pas que des personnes potentiellement non techniques s'occupent des tenants et aboutissants de CSS/HTML. C'est à vous, en tant que développeur web, de faire en sorte que le contenu CSS qui enveloppe la page soit aussi générique et propre que possible, mais là encore, vos rédacteurs n'ont pas besoin de le savoir.

Answer 2

J'avais la même tâche, et j'ai aligné mes images à droite en ajoutant ceci :

<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>

Pour aligner votre image à gauche ou au centre, remplacez

<div style="text-align: right">

avec

<div style="text-align: center">
<div style="text-align: left">

Answer 3

Alignez l'image et le texte côte à côte en tant que partie d'un paragraphe dans un seul bloc, à l'intérieur d'un cadre d'avertissement.

<div class="warning" style='background-color:#EDF2F7; color:#1A2067; border-left: solid #718096 4px; border-radius: 4px;'>
<p style='padding:0.7em; margin-left:0.7em; display: inline-block;'>
<img src="typora_images/image-20211028083121348.png" style="zoom:70%;  float:right; padding:0.7em"/>
<b>isomorphism</b>  &rarr;  In mathematics, an isomorphism is a structure-preserving mapping between two structures of the same type that can be reversed by an inverse mapping.<br>
</p>
</div>

Sortie :

Answer 4

Ce travail pour moi

<p align="center">
 <img src="/LogoOfficial.png" width="300" >
</p>

Answer 5

Le plus simple est d'envelopper l'image dans une balise centrale, comme suit ...

<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>

Tout ce qui a trait au format Markdown peut être testé ici. http://daringfireball.net/projects/markdown/dingus

Bien sûr, <center> est peut-être obsolète, mais c'est simple et ça marche !