web-dev-qa-db-fra.com

À l'aide de Markdown, comment centrer une image et sa légende?

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 accomplir cela avec Markdown?

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

htmlcssmarkdowncenter
39
Chetan

Vous avez besoin d'un conteneur de blocs avec une hauteur définie, la même valeur pour la hauteur de ligne et l'image avec vertical-align: middle; Ça devrait marcher.

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%;
}
8
MatTheCat

J'ai pensé que je devrais simplement utiliser HTML là où je veux aligner n'importe quoi horizontalement.

Donc, mon code ressemblerait à ceci:

Hello there!

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

Hi!
35
Chetan

Si vous utilisez kramdown , vous pouvez le faire

Hello there!

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

Hi!

.center {
  text-align: center;
}
20
Steven Penny

Je pense avoir une solution simple qui fonctionnera étant donné que vous pouvez définir CSS. Il ne nécessite également aucune extension ou HTML! D'abord votre code d'image de démarque:

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

Notez le hachage d'URL ajouté #center.

Ajoutez maintenant cette règle en CSS:

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

Vous devriez pouvoir utiliser un hachage d'URL comme celui-ci, presque comme définir un nom de classe.

Pour voir cela en action, consultez mon JSFiddle utilisant SnarkDown pour analyser MarkDown dans une zone de texte - https://jsfiddle.net/tremor/6s30e8vr/

19
tremor

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

-> This is centered Text <-

Donc, 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 Markdown qui implémentent uniquement ce qui est documenté sur Daring Fireball .

18
vdclouis

Avec kramdown (utilisé par githubpages)

{: style="text-align:center"}
That is, while there is value in the items on
the right, we value the items on the left more.

Ou en utilisant la réponse de @ (Steven Penny)

{:.mycenter}
That is, while there is value in the items on
the right, we value the items on the left more.

<style>
.mycenter {
    text-align:center;
}
</style>
6
raisercostin