Como alinear los textos y las imágenes

Aquí vamos aprender a alinear los textos y las imágenes en tus mensajes y temas.

  1. Alineando textos

Para alinear los textos debes usar códigos de HTML vamos a usar los codigos de: P y ALIGN.

Observa bien y practica en el foro de practicando en los foros.

Dirección de la alineación:
Usa una de estas direcciones “left, center o right” para ordenar al texto su localización donde quieres que aparezca.

<p align=“left”> si quieres que el texto aparezca a la izquierda </p>
<p align=“center”> si quieres que el texto aparezca al centro </p>
<p align=“right”> si quieres que el texto aparezca a la derecha. </p>

Códigos para textos con color:

<p align=“left”><font color=“red”>Test</p></font>
<p align=“left”><font color=“blue”>Test</p></font>
<p align=“left”><font color=“green”>Test</p></font>

Códigos para textos sin Color:

<p align=“left”>test</p>
<p align=“center”>test</p>
<p align=“right”>test</p>


Resultados con ejemplos:

texto aparezca a la izquierda


texto aparezca al centro


texto aparezca a la derecha

26 me gusta
  1. Alineando las Imágenes

Para alinear las imágenes vamos a usar el DIV y ALIGN.

Copy y paste la imagen del Internet, sube la imagen de tu PC o copia el URL de la imagen, cualquiera de las tres formas funciona.

Códigos:

Usamos los mismos que usamos para alinear los textos. El “left” para la izquierda, el “center” para que aparezca al centro y el “right” para la derecha.

<*div align=“center”><*img src="//discourse-cloud-file-uploads.s3.dualstack.us-west-2.amazonaws.com/helloforos/original/3X/3/b/3b6c10b5d3f138dab2b7a63731897d543e2604ff.png"></ div>

<*div align=“left”><*img src="//discourse-cloud-file-uploads.s3.dualstack.us-west-2.amazonaws.com/helloforos/original/3X/3/b/3b6c10b5d3f138dab2b7a63731897d543e2604ff.png"></ div>

<*div align=“right”><*img src="//discourse-cloud-file-uploads.s3.dualstack.us-west-2.amazonaws.com/helloforos/original/3X/3/b/3b6c10b5d3f138dab2b7a63731897d543e2604ff.png"></ div>
Resultado:


![image](upload://8tFHn1N4gDU5GonRhDxWICWPtpR.png)
![image](upload://8tFHn1N4gDU5GonRhDxWICWPtpR.png)
![image](upload://8tFHn1N4gDU5GonRhDxWICWPtpR.png)
22 me gusta

Wow, vamos avanzando, otra opción, gracias, enseguida me voy a practicas.

2 me gusta

Gracias,me son de gran utilidad :wink:

1 me gusta

este me gusta en el centro..gracias por compartir

![image](upload://8uFpuNaS4N8U3f1lGCDB6fTet5D.png) perfecto ya aprendi muchas gracias...

1 me gusta

woooooo! perfecto justo esto estaba buscando hoy, me encanta estamos progresando, Thank you aver si pronto nos permiten firmitas por lo pronto copy y paste jiji , saluditos.

gracias ahora voy a practicar

[hola

hola

Buenos dias

[hola

Buenos dias

][1]

[FELIZ][1]

Eso si que hay que aumentar cada linea o párrafo por separado <*font color=“blue”>

Responder como tema enlazado

FELIS

DDDDDD

test

EU

]]]]]UJUJU

Gracias por los tipos.

hola<

[quote=“taisbrasil, post:9, topic:14537”]
<p align=“right”> si quieres que el texto aparezca a la derecha. </p>
[/q

SOY

QIERO

Test<

YO SOY MUY CA COMPETETIVA

Encabezado

YO TE AMO

Gracias

Como há o

TESTANDO

[quote=“taisbrasil, post:14, topic:14537, full:true”]

hola<

Testando

hola

Encabezado ##
hola
hola
hola
hola
hola
hola

red"GRACIAS

1 me gusta

Muchas gracias…:grin:

Gracias @HelloForos ya lo puse en mis marcadores

ESTO ES LO QUE NECESITO, GRACIAS POR EL TUTO.

![image](upload://itwtM4rnBwQ4SXBhj05ts10BN1P.png)

Muchas Gracias

http://imagenesdeamistad.mx/wp-content/uploads/2015/06/Imágenes-de-Amistad-y-Agradecimiento-6.jpg

1 me gusta

Que buen dato de HelloForos

Esto me hizo recordar los codigos html que Bueno!

Aprender es lo mejor

Test

![image](upload://95ns4EYb037mo1C5zilBiJ4DPnK.jpg)