En utilisant le format Markdown, comment centrer une image et sa légende ?

Question

Je veux finir avec :

Hello there!

      <image>
      This is an image

Hi!

Où l'image et le texte This is an image sont centrés sur la page. Comment puis-je réaliser cela avec le format Markdown ?

Edit : Notez que je cherche à centrer horizontalement l'image et le texte sur la page.

Answer 1

Je me suis dit que je n'avais qu'à utiliser le HTML lorsque je voulais aligner quelque chose horizontalement.

Mon code ressemblerait donc à ceci :

Hello there!

      <center><img src="" ...></center>
      <center>This is an image</center>

Hi!

Answer 2

Je pense avoir une solution simple qui fonctionnera si vous pouvez définir les CSS. Elle ne nécessite pas non plus d'extensions ou de HTML ! D'abord votre code d'image markdown :

![my image](/img/myImage.jpg#center)  

Notez l'ajout du hash url #center.

Maintenant, ajoutez cette règle dans le CSS :

img[src*='#center'] { 
    display: block;
    margin: auto;
}

Vous devriez être en mesure d'utiliser un hachage d'url comme ceci, presque comme la définition d'un nom de classe.

Pour voir cela en action, regardez mon JSFiddle qui utilise SnarkDown pour analyser le MarkDown dans un textarea. https://jsfiddle.net/tremor/6s30e8vr/

Answer 3

Si vous utilisez kramdown vous pouvez faire ceci

Hello there!

{:.center}
![cardinal](/img/2012/cardinal.jpg)  
This is an image

Hi!

.center {
  text-align: center;
}

Answer 4

En Mou (et peut-être Jekyll), c'est assez simple.

-> This is centered Text <-

En gardant cela à l'esprit, vous pouvez appliquer cela à la syntaxe img.

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

Cette syntaxe ne fonctionne pas pour les implémentations de Markdown qui n'implémentent que ce qui est documenté dans le document Daring Fireball .

Answer 5

Vous avez besoin d'un bloc conteneur avec une hauteur définie, la même valeur pour la hauteur de ligne et une image avec vertical-align:middle ; Cela devrait fonctionner.

Hello there !

<div id="container">
    <img />
    This is an image
</div>

Hi !

#container {
    height:100px;
    line-height:100px;
}

#container img {
    vertical-align:middle;
    max-height:100%;
}