Cómo alinear textos e imágenes en HTML

Alinear el texto con HTML

1. Encierra cada sección que ha cambiado la alineación con el código “div”. Esto significa que necesitas agregar el código “div” dentro de los símbolos de “menor que” y “mayor que” (<>) antes del primer código de HTML que tendrá su alineación cambiada, y agrega el código “/div” dentro de estos símbolos después del último código de HTML que tendrá su alineación cambiada.

   

2. Determina como necesitarás cambiar la alineación del texto en ese código “div”.

   

3. Si necesitas alinear el texto a la izquierda, cambia el código “div” para que el siguiente texto este dentro de los símbolos “<>”: div style='text-align:left’.

   • Si necesitas alinear el texto a la derecha, cambia el código “div” a "div style='text-align:right' " entre los símbolos “<>”.
   • Si necesitas alinear el texto al centro, cambia el código “div” a “div style='text-align:center’ ” entre los símbolos “<>”.
   • Si necesitas justificar el texto, cambia el código “div” a “div style='text-align:justify’ ” entre los símbolos “<>”.
   

4. Guarda tus cambios.

   

5. Verifica la apariencia del contenido para asegurarte de que todo esté en orden.

   • Si no funciona, entonces el sitio web tiene un código específico en su hoja de estilo que invalida el código “div”. Para anular la hoja de estilo del sitio web tendrás que agregar la versión apropiada de “style='text-align:right’ ” dentro del código de apertura de cada elemento para tener su alineación cambiada. Por ejemplo, un código “p” se convertiría en “p style='text-align:right’ ” entre los símbolos “<>”.
   

6. Disfruta viendo el texto alineado exactamente como lo querías.

   

Alinear imágenes con HTML

1. Encuentra el código de HTML para la imagen que desees alinear.

   

2. Edita el código “img” para agregarle la propiedad “float” (flotante) correcta.

   • Si necesitas que la imagen se posicione a la izquierda, agrega “style='float:left’ ” al código, como en “img style='float:left’ ” entre los símbolos “<>”.
   • Si necesitas que la imagen se posicione a la derecha, agrega “style='float:right’ ” al código, como en “img style='float:right’ ” entre los símbolos “<>”.
   • Si necesitas que la imagen se posicione en el centro, el código es un poco más complicado. No existe la propiedad “float:center”, entonces tendrás que agregar "style='align:center;text-align:center' " al código, como en "img style='align:center;text-align:center'", entre los simbolos “<>”.
   

3. Guarda tu código.

   

4. Disfruta de las imágenes alineadas.