## 🎉 Feliz 2018 Amigos, lectores y comunidades de Steemit 🎉 ###### Hemos empezado el año con buen pie, Steem está subiendo y eso es una buenísima noticia. ###### Desde que empezó el año y en pocos días he visto como el valor de mi cuenta ha ido aumentado notablemente debido a esto. Además, no ha sido lo único que ha subido. Para mi sorpresa el upvote también lo ha hecho, un poquito más.😃 *** *** ### Para comenzar el año, he preparado un post algo más educativo. *** Steemit está teniendo un gran crecimiento y aceptación. Cada día se registran nuevos usuarios. Personas que llegan con miles de dudas. Y que menos que hacerles el camino más fácil. Uno de los retos al cual nos enfrentamos al entrar en Steemit, es formatear o dar formato a nuestros contenidos. Para ello contamos con dos opciones: Crear la publicación en Markdown o usar el editor. Desde el principio comencé con Markdown. No tenía ni idea de su funcionamiento, pero la [guía](https://guides.github.com/features/mastering-markdown/) me ayudó lo suficiente para avanzar un pasito más. También investigué como alinear imagen al texto y descubrí que Html era la solución. Todo lo investigado y aprendido en este corto camino he intentado plasmarlo en las publicaciones. Y como el conocimiento hay que compartirlo he hecho una lista explicativa y detallada de los códigos que he usado hasta el momento. *** #### Imagen centrada con texto debajo *** ![centrada.jpg](https://steemitimages.com/DQmXSBbhiZB1pRUsp6ZzYnfhvv2sTr8CCHHFVqMXW4hu1kB/centrada.jpg) Este es un ejemplo de *imagen centrada* con texto debajo. Para ello abrimos **< center >** insertamos la imagen y cerramos con **< / center >** ###### Puedes copiar el código aquí 👇 ` IMAGEN ` ###### 💡 Recuerda borrar la palabra IMAGEN. Ahí debe de ir tu foto. ###### 📌Para centrar el texto que está debajo se hace del mismo modo. Solo que en vez de insertar una imagen, escribimos el texto entre las dos etiquetas. ![separador@1.5x.png](https://steemitimages.com/DQmXRVnYsRqBLac4v4rZ2qPk1X8pVQz1ai9zhB8gRxYnK9o/separador%401.5x.png) #### Imagen a la derecha del texto ![separador@1.5x.png](https://steemitimages.com/DQmXRVnYsRqBLac4v4rZ2qPk1X8pVQz1ai9zhB8gRxYnK9o/separador%401.5x.png)

Este es un ejemplo de como quedaría una imagen *alineada a la derecha* de un texto. Tenemos que escribir un código diferente al anterior. En este caso abrimos con **< div class="pull-right" >< img src=** insertamos la imagen y cerramos con **>** ###### Copia el código aquí 👇 `

Presiona dos veces Enter y escribe el texto.` *** ![separador@1.5x.png](https://steemitimages.com/DQmXRVnYsRqBLac4v4rZ2qPk1X8pVQz1ai9zhB8gRxYnK9o/separador%401.5x.png) #### Imagen a la izquierda del texto ![separador@1.5x.png](https://steemitimages.com/DQmXRVnYsRqBLac4v4rZ2qPk1X8pVQz1ai9zhB8gRxYnK9o/separador%401.5x.png)

Para *alinear la imagen a la izquierda* del texto usamos el mismo código. Lo único que tenemos que hacer es remplazar **Right por Left.** Abrimos con la etiqueta **< div class="pull-left">< img src=** insertamos la imagen y cerramos con **>< /div>** ###### Copia el código 👇 `

Presiona dos veces Enter y escribe el TEXTO.` *** ![separador@1.5x.png](https://steemitimages.com/DQmXRVnYsRqBLac4v4rZ2qPk1X8pVQz1ai9zhB8gRxYnK9o/separador%401.5x.png) #### Lista vertical de imágenes y texto ![separador@1.5x.png](https://steemitimages.com/DQmXRVnYsRqBLac4v4rZ2qPk1X8pVQz1ai9zhB8gRxYnK9o/separador%401.5x.png) ||| |---|---| |![primer plano.jpg](https://steemitimages.com/DQmYr8F9TLkyNzD7ezis3YeSA5BPAgPChJV7pW92jMkuTSP/primer%20plano.jpg)|Esto es un ejemplo de lista de imágenes y textos.| |![segundoplan.jpg](https://steemitimages.com/DQmRCxnmR6C8sorW3v338BuHErr43pZB69c2cxzDCgYMpPK/segundoplan.jpg)|Para hacerla usaremos los siguientes símbolos.| |![3plano.jpg](https://steemitimages.com/DQmS34do6RBjeASQYayZaqYdNztTisMFoD6msw8gAQtWC2t/3plano.jpg)|**Barra y guion**| |![4planos.jpg](https://steemitimages.com/DQma6r91TLx3rjnFMjrwPzMyKuaaQBxpMgMn2NQspdVSDvT/4planos.jpg)|

Copia el código 👇

| ||| |---|---| |imagen|texto| |imagen|texto| |imagen|texto| |imagen|texto| Pulsar dos veces Enter para salir del cuadro. ###### 📌Si por el contrario queremos la lista de imágenes a la derecha y el texto a la izquierda, solo tenemos que cambiar el orden imagen/texto. ||| |---|---| |texto|imagen| |texto|imagen| |texto|imagen| |texto|imagen| Pulsar dos veces Enter para salir del cuadro. ###### 💡 Es recomendable que todas las imágenes sean del mismo tamaño. De esta manera el cuadro quedará compensado. ![separador@1.5x.png](https://steemitimages.com/DQmXRVnYsRqBLac4v4rZ2qPk1X8pVQz1ai9zhB8gRxYnK9o/separador%401.5x.png) #### Alineación horizontal de 2 imágenes y texto ![separador@1.5x.png](https://steemitimages.com/DQmXRVnYsRqBLac4v4rZ2qPk1X8pVQz1ai9zhB8gRxYnK9o/separador%401.5x.png) ||| |---|---| |![alto.jpg](https://steemitimages.com/DQmYzvdZQyjAp7VN4k6uac4mUNAfBcFUnF71Z8gt1KeX2L7/alto.jpg)|Esto es un ejemplo de como queda dos imágenes horizontales||![altoq.jpg](https://steemitimages.com/DQmbvUc1hfB4Ly1tV1veDz5FVvTd6xiWUUywHEWg6XNthbw/altoq.jpg)|con texto a la derecha.| ###### Copia el código 👇 ||| |---|---| |imagen|texto||imagen|texto| Pulsar dos veces Enter para salir del cuadro. ###### 📌 También podemos cambiar el orden como en la tabla anterior, quedando las imágenes a la derecha del texto. ||| |---|---| |texto|imagen||texto|imagen| Pulsar dos veces Enter para salir del cuadro. ![separador@1.5x.png](https://steemitimages.com/DQmXRVnYsRqBLac4v4rZ2qPk1X8pVQz1ai9zhB8gRxYnK9o/separador%401.5x.png) #### 3 Imágenes horizontales ![separador@1.5x.png](https://steemitimages.com/DQmXRVnYsRqBLac4v4rZ2qPk1X8pVQz1ai9zhB8gRxYnK9o/separador%401.5x.png) |||| |---|---|---| |![los 2.jpg](https://steemitimages.com/DQmVdL7kzFg9ECFmyW7YZhu7AmLe7381qGfgLVGab7urH7V/los%202.jpg)|![olos2.jpg](https://steemitimages.com/DQma9XkRVS1XmBcn8ZvR3r9BFVKEggdQknwNZt8SLxDr2Cp/olos2.jpg)|![otr2.jpg](https://steemitimages.com/DQmcxqpubQWWepB6vJqHDcNx8RACsWtFb57ErENX9mYXbKm/otr2.jpg)| Este es un ejemplo de cómo quedaría tres imágenes *alineadas en horizontal*. ###### Para hacerlo, copia aquí el código 👇 |||| |---|---|---| |imagen|imagen|imagen| ![separador@1.5x.png](https://steemitimages.com/DQmXRVnYsRqBLac4v4rZ2qPk1X8pVQz1ai9zhB8gRxYnK9o/separador%401.5x.png) #### Fuentes ![separador@1.5x.png](https://steemitimages.com/DQmXRVnYsRqBLac4v4rZ2qPk1X8pVQz1ai9zhB8gRxYnK9o/separador%401.5x.png) >Todas las fotos han sido tomadas con Samsung S7 edge. Autoría @reimerlin. >Separador editado en Adobe Illustrator. Original, de libre descarga y uso: https://www.vecteezy.com ### Bueno amig@s espero que estos ejemplos sirvan de ayuda e inspiración para vuestras publicaciones. Respecto a las fotografía de estos mismos…he tomado como modelos al adorable Porg y valiente Rocket. ¿A que son simpáticos? 😄 ### 🤗Feliz día de Reyes y gracias por pasarte por aquí 🤗