La ubicación de los 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), la mejor es usar CSS.
A continuación, veremos cómo usar una propiedad en línea de estilo CSS simple para alinear imágenes, tablas, párrafos y más.
Nota: Estos mismos métodos también pueden usarse en hojas de estilo externas, pero como se aplican a elementos individuales y es probable que deban permanecer así, es mejor usar un estilo en línea como se menciona a continuación.
Alinear párrafos de texto
La etiqueta de párrafo es el primer lugar para comenzar a diseñar su página web. Las etiquetas de apertura y cierre se ven así:
La alineación predeterminada del texto en un párrafo está en el lado izquierdo de la página, pero también puede alinear sus párrafos a la derecha y al centro.
El uso de la propiedad float le permite alinear párrafos a la derecha o 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 más pequeño 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, en los lados derecho e izquierdo de la ventana.
Para justificar el texto en un párrafo, usaría la propiedad text-align.
También puede alinear todo el texto dentro de un párrafo hacia el lado derecho o hacia la izquierda (el valor predeterminado), 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 están contenidas dentro del párrafo u otro elemento, pero la mayoría de los navegadores consideran las imágenes como en línea para esta propiedad.
Alineando imagenes
Al usar la propiedad flotante en una etiqueta de imagen, puede definir la ubicación de las imágenes en la página y cómo el texto las envolverá.
Al igual que en los párrafos anteriores, la propiedad de estilo flotante en la etiqueta de imagen posicionará su imagen en la página y le indica al navegador cómo fluir el texto y otros elementos alrededor de esa imagen.
El texto que sigue a la etiqueta de imagen anterior fluirá alrededor de la imagen a la derecha cuando la imagen se muestre a la izquierda de la pantalla.
Si quiero que el texto deje de envolver la imagen, uso la propiedad clear:
Alineando más de los párrafos
Sin embargo, ¿qué sucede si desea alinear algo más que un párrafo o una imagen? Simplemente puede poner una propiedad de estilo en cada párrafo, pero hay una etiqueta que puede usar que es más efectiva:
Simplemente rodee el texto y las imágenes (incluidas las etiquetas HTML) con la etiqueta y la propiedad de estilo (float o text-align) y todo en esa división se alineará de la manera que desee.
Tenga en cuenta que se respetarán las alineaciones agregadas a párrafos o imágenes dentro de la división, anulando la etiqueta.
