Usando Markdown, ¿cómo centro una imagen y su título?

Quiero terminar con:Usando Markdown, ¿cómo centro una imagen y su título?

Hello there! 

     <image> 
     This is an image 

Hi!

donde la imagen y el texto This is an image se centran en la página. ¿Cómo logro esto con Markdown?

Editar: Tenga en cuenta que estoy buscando centrar horizontalmente la imagen y el texto en la página.

Fuente

2010-10-12 Chetan

Necesita un contenedor de bloques con una altura definida, el mismo valor para la altura de línea y una imagen con vertical-align: medio; Debería funcionar.

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

Fuente

2010-10-12 09:35:56 MatTheCat

¿Puedo usar la sintaxis de Markdown dentro del 'div'? – Chetan

Creo que Markdown no se usa para el posicionamiento – MatTheCat

Oh, estaba buscando el centrado horizontal. – Chetan

Pensé que solo tendría que usar HTML donde quisiera alinear horizontalmente cualquier cosa.

Así que mi código se vería así:

Hello there! 

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

Hi!

Fuente

2010-10-17 21:10:44 Chetan

+16

El elemento '

' está ** desaprobado ** en HTML4 desde 1998. Simplemente use CSS para hacer de él o su envoltorio un elemento de bloque con un ancho fijo y 'margin: 0 auto;' en él. – BalusC

+17

Obsoleto no significa que no se puede usar. Chetan ha dado una sugerencia válida.No creo que merezca su calificación actual de -12 para este comentario. –

Secundado, la etiqueta puede estar obsoleta, pero en este caso es útil. – Thriveth

Si está utilizando kramdown, usted puede hacer esto

Hello there! 

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

Hi! 

.center { 
    text-align: center; 
}

Fuente

2012-03-06 02:54:55

En Mou (y tal vez Jekyll) esto es bastante simple.

-> This is centered Text <-

Teniendo esto en cuenta, puede aplicar esto a la sintaxis de img.

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

Esta sintaxis no funciona para implementaciones de rebajas que implementan sólo lo que se documenta en Daring Fireball.

Fuente

2013-03-03 12:09:00 vdclouis

Con kramdown (utilizado por 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 usando la respuesta 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>

Fuente

2017-01-08 15:34:29 raisercostin

ESTO. Esta es la respuesta que, por alguna razón, pasé dolorosamente una hora buscando. (el primero) Gracias @raisercostin. Si pudiera votarte tres veces, lo haría. – Schwad

Esta es la respuesta, ahora sé por qué las joyas están en el fondo del mar: guiño: –

creo que tengo una solución que debería servir, ya que puede definir CSS y no requiere ninguna extensión Primero su código de imagen de marcación:

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

Tenga en cuenta que se ha agregado url hash #center.

Ahora añadir esta regla de CSS

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

Usted debe ser capaz de utilizar un hash URL como esta casi como la definición de un nombre de clase.

Fuente

2017-04-29 03:19:52 tremor

¡Funcionó! ¿Pero puedes explicar por qué funciona la parte CSS? Simplemente se estableció para bloquear y margen automático. Sin estilo central ¿Cómo puede estar centrado? –

En CSS, cuando se usa margin: auto, un elemento se centrará en relación con su contenedor. – tremor

Usando Markdown, ¿cómo centro una imagen y su título?

Respuesta

Cuestiones relacionadas