- Title: How to optimize the markdown in images within your publications
- Summary: This tutorial is about all the possibilities of the markdown in use of images within the publications.
- Language: Spanish
En este tutorial me enfocaré en las imágenes dentro de una publicación, voy a incluir todas las posibilidades del markdown para el uso de imágenes basándome en mi experiencia.
Posición de imagen
📝código para imagen centrada
< center >Aquí coloca la imagen< /center >
Resultado

Nota: si vas a copiar y pegar el código desde esta publicación no olvides quitar el espacio en blanco dejado antes y después de los signos < y >
📝código para imagen a la derecha
< div class="pull-right" >< img src="Aquí dentro coloca la imagen" >< /div >
Resultado
Nota: si vas a copiar y pegar el código desde esta publicación no olvides quitar el espacio en blanco dejado antes y después de los signos < y >
📝código para imagen a la izquierda
< div class="pull-left" >< img src="Aquí dentro coloca la imagen" >< /div >
Resultado
Nota: si vas a copiar y pegar el código desde esta publicación no olvides quitar el espacio en blanco dejado antes y después de los signos < y >
📝código para imagen y texto en 2 columnas
< div class="pull-right" >< img src="Aquí dentro coloca la imagen" >Aquí escribe el texto< /div >< div class="pull-left" >< img src="Aquí dentro coloca la imagen" >Aquí escribe el texto< /div >
Resultado
Nota: si vas a copiar y pegar el código desde esta publicación no olvides quitar el espacio en blanco dejado antes y después de los signos < y >
Uso de imágenes en tablas
📝código para tabla con 2 imágenes en horizontal
|||
|---|---|
|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|
Resultado
![]() |
![]() |
📝código para tabla con 3 imágenes en horizontal
||||
|---|---|---|
|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|
Resultado
![]() |
![]() |
![]() |
📝código para tabla con 4 imágenes en horizontal
|||||
|---|---|---|---|
|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|Aquí dentro coloca la imagen|
Resultado
![]() |
![]() |
![]() |
![]() |
📝código para tabla con 2 imágenes en Vertical
|||
|---|---|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|
Resultado
![]() |
|
![]() |
📝código para tabla con 3 imágenes en Vertical
||||
|---|---|---|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|
Resultado
![]() |
||
![]() |
||
![]() |
📝código para tabla con 4 imágenes en Vertical
|||||
|---|---|---|---|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|
|Aquí dentro coloca la imagen|
Resultado
![]() |
|||
![]() |
|||
![]() |
|||
![]() |
📝código para tabla con 2 imágenes en diagonal
|||||
|---|---|
|Aquí dentro coloca la imagen|
||Aquí dentro coloca la imagen|
Resultado
![]() |
|
![]() |
📝código para tabla con 3 imágenes en diagonal
||||
|---|---|---|
|Aquí dentro coloca la imagen|
||Aquí dentro coloca la imagen|
|||Aquí dentro coloca la imagen|
Resultado
![]() |
||
![]() |
||
![]() |
📝código para tabla con 4 imágenes en diagonal
|||||
|---|---|---|---|
|Aquí dentro coloca la imagen|
||Aquí dentro coloca la imagen|
|||Aquí dentro coloca la imagen|
||||Aquí dentro coloca la imagen|
Resultado
![]() |
|||
![]() |
|||
![]() |
|||
![]() |
📝código para tabla con 2 imágenes y texto
|||
|---|---|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
Resultado
![]() |
Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees |
![]() |
Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees |
📝código para tabla con 3 imágenes y texto
||||
|---|---|---|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
Resultado
![]() |
Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees | |
![]() |
Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees | |
![]() |
Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees |
📝código para tabla con 4 imágenes y texto
||||
|---|---|---|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
|Aquí dentro coloca la imagen|Aquí coloca el texto|
Resultado
![]() |
Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees | ||
![]() |
Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees | ||
![]() |
Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees | ||
![]() |
Si te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees, por favor apoyame con tu votoSi te gusta lo que lees |
Posted on Utopian.io - Rewarding Open Source Contributors
