La última guía para ALINEACIÓN DE IMAGENES y LINKS en Markdown! Conviértete en un profesional ahora con estos sencillos consejos.

1. ALINEACIÓN DE IMAGEN POR DEFECTO

La manera más sencilla de agregar imágenes a tus publicaciones usando markdown es con este comando de codificación:

Para obtener LINK de la imagen, basta con hacer clic derecho con ratón en la imagen que vas a utilizar desde la Web y luego hacer clic en "Copiar dirección de imagen".

Tenga en cuenta: No hay espacios ni brechas entre los símbolos; El signo de exclamación y los corchetes, y no hay espacios entre los corchetes y la letra más cercana a él. Para "Título de imagen" puedes poner lo que quieras, nadie lo va a ver; Es sólo para completar el comando para que la imagen se muestre muy bien.

Un ejemplo de como debería verse:

Si lo haces correctamente, obtendrá este resultado:

(Observa cómo se ajusta automáticamente a la izquierda)

2. ALINEACIÓN CENTRAL

Si deseas que tu imagen se sitúe en el centro de la sección, utiliza este comando de codificación el cual es sencillo:

Una vez más, para obtener el enlace (Link) de imagen en Internet, simplemente has clic derecho sobre la imagen que estás visualizando en web y, a continuación, has clic en "Copiar dirección de imagen".

Nota: No hay espacios ni brechas entre el símbolo y la letra más cercana

Para demostrarlo, debe verse de esta forma:

Si lo haces correctamente, obtendrás esto:

(Observa cómo se sienta en el centro)

2. ALINEACIÓN CENTRAL CON UN ENLACE A LA FUENTE

Agregrando un enlace para dirigir a sus lectores a la fuente

Para añadir el nombre de la fuente y el enlace en la parte inferior de la imagen, siga este comando de codificación:

Para demostrarlo, se verá algo como esto:

Si lo haces correctamente, deberías obtener:

(Observe la fuente en el centro en la parte inferior de la imagen)

Tumblr

3. ALINEAR LA IMAGEN DERECHA CON TEXTO A LA IZQUIERDA

Para fines estéticos, si deseas alinear tu imagen a la derecha con un párrafo o frase a la izquierda de la misma; Como lo hacen en lo blogs y revistas, entonces escribe este comando:

Si en la parte inferior de la imagen desea poner un enlace a la fuente, utilice este comando:

Si deseas que el enlace de la fuente se sitúe en el centro inferior de la imagen, utiliza este comando:

Para que los párrafos u oraciones aparezcan a la izquierda de la imagen: continúa escribiendo normalmente, después de escribir cualquiera de los comandos anteriores, y el texto debería aparecer a la izquierda de la imagen que estará la derecha.

Observa el siguiente ejemplo:

---

IMAGEN A LA DERECHA, TEXTO A LA IZQUIERDA

Modelo:Natalie Halcro

Me gusta cómo se ve esto; Añade esa chispas de individualidad y profesionalismo a tus mensajes. También te hace ver tecnológico; Algunos te preguntaran "cómo es que haces para que tus artículos se vean tan bien?" Para lograr esto, simplemente sigue escribiendo normalment después de escribir el comando.

Para volver a la forma normal de escribir (para volver a escribir en la parte inferior de la imagen), simplemente coloca el comando
tantas veces sea posible hasta que vuelva a la parte inferior de la imagen. Para esta imagen, lo tuve poner 3 veces (con o sin espacios entre cada uno, no importa).

Escribiré aqui para mostrarte que el texto está de vuelta a la normalidad al final de esta imagen. ¿Ves lo que quiero decir?

4. ALINEAR IMAGEN A LA IZQUIERDA CON TEXTO A LA DERECHA

Para fines estéticos, si deseas alinear tu imagen a la izquierda y el texto a la derecha como lo hacen en blogs y revistas, escribe este comando:

Si en la parte inferior de la imagen deseas poner un enlace a la fuente, utiliza este comando

Si desea que el enlace de la fuente se sitúe en el centro inferior de la imagen, utiliza este comando:

Para que los párrafos u oraciones aparezcan a la derecha de la imagen: continúa escribiendo normalmente después de escribir cualquiera de los comandos anteriores y el texto debería aparecer a la derecha de la imagen situada a la izquierda.

Observa el ejemplo

---

Imagen a la izquierda, texto a la derecha

Tumblr

Una vez más, la individualidad y la profesionalidad se agregará a sus artículos. Parecerás un informático. La gente definitivamente te preguntará "¿cómo haces para que tus artículos se vean así?" Para lograr esto, simplemente sigue escribiendo normalment después de escribir el comando.

Para volver a la forma normal de escribir (para volver a escribir en la parte inferior de la imagen), simplemente coloca el comando
tantas veces sea posible hasta que vuelva a la parte inferior de la imagen. Para esta imagen, lo tuve que poner 2 veces (con o sin espacios entre cada uno, no importa).

Voy a escribir algo para mostrarte que el texto está de vuelta al final de esta imagen. ¿Ves lo que quiero decir?

5. IMAGENES QUE SON ENLACES

BONUS TIPS: DIVISORES

En caso de que te preguntes cómo conseguí los "divisores de lujo" para separar las secciones; Utilicé el comando "Image Center" (Sugerencia # 2 de arriba: Alineación central) para los divisores. Es el mismo código de formato para centrar las imagenes. Busca en google "divisores" y elige uno que me guste.

Copia y pega la "dirección de imagen" (url de imagen) del divisor en el comando.

GRACIAS POR LEER!

ESTE POST FUE POSIBLE GRACIAS A MI COLEGA @TAJO QUIEN ES DUEÑO Y AUTOR DEL MISMO EN SU VERSIÓN EN INGLES Y ME OTORGÓ PERMISOS PARA TRADUCIRLO AL ESPAÑOL PARA USTEDES. MUCHAS GRACIAS! LINK DIRECTO A SU POST EN INGLES