La colocación de elementos en una página web es esencial para su diseño general. Aunque hay otras formas de influir en el diseño, como usar tablas (que no recomendamos), lo mejor es usar CSS.
A continuación, veremos cómo utilizar una simple propiedad en línea de estilo CSS para alinear imágenes, tablas, párrafos y mucho más.
Estos mismos métodos se pueden utilizar también en hojas de estilo externas, pero dado que se aplican a elementos individuales y es probable que deban permanecer de esa manera, es mejor utilizar un estilo en línea como el que se menciona a continuación.
Índice de contenidos
Alinear párrafos de texto
La etiqueta de párrafo es el primer lugar para empezar a diseñar su página web. Las etiquetas de apertura y cierre se ven así:
La alineación predeterminada del texto de un párrafo se encuentra en el lado izquierdo de la página, pero también puede alinear los párrafos a la derecha y al centro.
Usando la propiedad float le permite alinear párrafos a la derecha o a la izquierda del elemento padre. Cualquier otro elemento dentro de ese elemento padre fluirá alrededor del elemento flotado.
Para obtener el mejor efecto con un párrafo, es mejor establecer un ancho en el párrafo que sea menor que el elemento contenedor (padre).
Alinear el texto dentro de los párrafos
Podría decirse que la alineación más interesante para el texto del párrafo es «justificar», que le dice al navegador que muestre el texto alineado, esencialmente, tanto en el lado derecho como en el izquierdo de la ventana.
Para justificar el texto de un párrafo, se utilizaría la propiedad text-align.
También puede alinear todo el texto dentro de un párrafo a la derecha o a la izquierda (por defecto), usando la propiedad text-align.
La propiedad text-align alineará el texto dentro del elemento. Técnicamente, no se supone que alinee las imágenes que se encuentran dentro del párrafo u otro elemento, pero la mayoría de los navegadores tratan las imágenes como en línea para esta propiedad.
Alineación de imágenes
Usando la propiedad float en una etiqueta de imagen puede definir la ubicación de las imágenes en la página y cómo el texto las rodeará.
Al igual que los párrafos anteriores, la propiedad de estilo flotante en la etiqueta de la imagen posicionará su imagen en la página y le dirá al navegador cómo hacer fluir el texto y otros elementos alrededor de esa imagen.
El texto que sigue a la etiqueta de la imagen de arriba fluirá alrededor de la imagen a la derecha como la imagen se muestra a la izquierda de la pantalla.
Si quiero que el texto deje de envolver la imagen, utilizo la propiedad clear:
Alinear más de un párrafo
Sin embargo, ¿qué pasa si desea alinear más que un párrafo o una imagen? Podrías simplemente poner una propiedad de estilo en cada párrafo, pero hay una etiqueta que puedes usar que es más efectiva:
Simplemente rodee el texto y las imágenes (incluyendo las etiquetas HTML) con la etiqueta y la propiedad style (float o text-align) y todo en esa división estará alineado como usted lo desee.
Tenga en cuenta que las alineaciones añadidas a los párrafos o imágenes dentro de la división se respetarán, anulando la etiqueta.
