Utilizzando Markdown, come centrare un'immagine e la sua didascalia?

Question

Voglio finire con:

Hello there! 

     <image> 
     This is an image 

Hi! 

in cui l'immagine e il testo This is an image sono centrati sulla pagina. Come posso raggiungere questo obiettivo con Markdown?

Modifica: notare che sto cercando di centrare orizzontalmente l'immagine e il testo sulla pagina.

Answer 1

È necessario un contenitore di blocchi con un'altezza definita, lo stesso valore per l'altezza della linea e l'immagine con allineamento verticale: medio; Dovrebbe funzionare.

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

Answer 2

Ho pensato che avrei solo dovuto usare l'HTML dove voglio allineare orizzontalmente qualsiasi cosa.

Quindi il mio codice sarebbe simile a questa:

Hello there! 

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

Hi! 

Answer 3

Se si utilizza kramdown, si può fare questo

Hello there! 

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

Hi! 

.center { 
    text-align: center; 
} 

Answer 4

In Mou (e forse Jekyll) questo è abbastanza semplice.

-> This is centered Text <- 

Quindi, tenendo presente che è possibile applicare questo alla sintassi img.

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

Questa sintassi non funziona per le implementazioni Markdown che implementano solo ciò che è documentato su Daring Fireball.

Answer 5

Con kramdown (usato da 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. 

o utilizzando la risposta da @ (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> 

Answer 6

penso di avere una soluzione che dovrebbe funzionare, dato che è possibile definire i CSS e non richiede alcuna estensione. In primo luogo il codice immagine Markdown:

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

Annotare il aggiunto URL hash #center.

Ora aggiungere questa regola in CSS

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

Si dovrebbe essere in grado di utilizzare un hash URL come questo quasi come la definizione di un nome di classe.