La disposición del contenido que aparece en un sitio web es muy significativo cuando se trata de hacer que su sitio web sea exquisitamente agradable y mejorando su experiencia de usuario. El contenido puede ser un elemento HTML (en línea o a nivel de bloque), algún texto, una imagen, etc. Hay varios enfoques disponibles en CSS para alinear este tipo de contenido en su página web. En esta publicación, vamos a discutir algunos de estos enfoques para aclarar el concepto de alineación de contenido.

Vamos a empezar

Alinear elementos de nivel de bloque

Hay una gran cantidad de elementos que se encuentran en la categoría de elementos de nivel de bloque, como

,

a

, , etc. Puedes alinear estos elementos de diferentes maneras. Hemos discutido algunos aquí para ti.

Cómo centrar el texto alinearse en CSS

Puedes alinear el texto usando el CSS texto alineado propiedad. Esta propiedad representa diferentes valores como izquierda, derecha, centro y justificar.

Ejemplo

Supongamos que desea alinear algún texto presente dentro de un contenedor Div a la derecha. Sigue el código a continuación.

Html

Este texto está correcto alineado.

Colocamos un

elemento dentro de un elemento y asignado una clase "correcta" al elemento.

CSS

.bien
Text-Align: Right;
Border: 3px Purple sólido;

Usando la propiedad de alineación de texto estamos alineando el texto al lado derecho del contenedor Div.

Producción

El texto se ha alineado a la derecha utilizando la propiedad de alineación de texto.

Alinear elementos en línea

Llega ese momento en que necesitamos alinear elementos en línea como imágenes. Puede alinear este tipo de elementos cambiando su tipo de elemento para bloquear el nivel utilizando la propiedad de visualización de CSS y luego alinearlo varias propiedades CSS de acuerdo con la necesidad.

Alinear una imagen

Utilizando varias propiedades CSS como mostrar, margen de pesa, o margen de derecha, Puedes alinear una imagen en el estilo que quieras.

Ejemplo

Supongamos que desea centrar una imagen horizontalmente aparte de si está en un contenedor o no.

Html

Aquí hemos insertado una imagen usando la etiqueta.

CSS

img
bloqueo de pantalla;
margen-izquierda: auto;
margen-derecha: auto;
Ancho: 50%;

Para el centro alinearse una imagen horizontalmente, establezca su pantalla en bloque, y ambos márgenes (izquierda y derecha) a Auto. Además, puede proporcionar un ancho o altura de su elección.

Producción

La imagen ha sido alineada con el centro con éxito.

Alineación horizontal

Exploremos diferentes enfoques que se pueden usar para alinear elementos de nivel de bloque horizontalmente.

Cómo centrar alinear un elemento

Supongamos que tiene A y desea que tome solo una cantidad específica de espacio en lugar de ocupar todo el espacio horizontal y alinearlo en el centro de la página. Así es como lo haces.

Html

Alinear contenido en CSS

Aquí, hemos creado un elemento y anidadamos un

elemento en él.

CSS

.centro
relleno: 5px;
margen: auto;
Ancho: 70%;
Border: 3px Purple sólido;

Ahora, para que el elemento Div ocupe el espacio especificado solo para que no se estire a las esquinas de su contenedor, le dé algo de ancho. Para alinearlo horizontalmente, configure el margen en auto.

Producción

El div ha sido alineado con el centro con éxito.

Cómo alinear elementos utilizando la propiedad de posición

En este ejemplo, alinearemos un contenedor DIV a la derecha utilizando el valor absoluto de la propiedad de posición.

Html

Alinear elementos utilizando la propiedad de posición CSS

Este div está alineado a la derecha utilizando el valor aboslú de la propiedad de posición CSS.

Aquí hemos creado dos contenedores Div para comprender el funcionamiento del valor absoluto de la propiedad de la posición. La clase "Div" se asigna a la primera etiqueta Div y la clase "verde" se asigna a la segunda etiqueta Div.

CSS

.div
relleno: 15px;
borde: 3px negro sólido;

.verde
Posición: Absoluto;
Derecho: 1%;
Arriba: 15%;
Ancho: 300px;
borde: 3px verde sólido;
relleno: 10px;

Ambos contenedores DIV han recibido algún estilo, sin embargo, la propiedad de posición de Second Div se ha establecido en absoluto. Ahora el Segundo Div estará alineado con respecto a la posición del Primer Div.

Producción

El DIV "verde" se ha posicionado absolutamente con respecto al primer div utilizando la propiedad de posición CSS.

Cómo alinear elementos utilizando la propiedad flotante.

Supongamos que desea flotar un recipiente Div al lado derecho de la página.

Html

Hola Mundo!

En el código anterior, hemos creado un contenedor Div y anidadamos un

elemento en él.

CSS

.bien
flotar derecho;
Ancho: 300px;
Border: 3px Purple sólido;
relleno: 5px;

Usando la propiedad flotante estamos flotando todo el div y el contenido dentro de él a la derecha.

Producción

El contenedor Div ha sido flotado a la derecha con éxito.

Alineamiento vertical

Aquí hemos explicado algunas formas que puede usar para alinear elementos verticalmente.

Cómo alinear elementos verticalmente usando relleno

Supongamos que desea centrar verticalmente algún texto presente dentro de un contenedor Div.

Html

Este párrafo se centra verticalmente.

Aquí hemos creado un elemento div y anidado un

elemento dentro de él.

CSS

.centro
relleno: 80px 0;
Border: 3px Purple sólido;

En el código CSS anterior, estamos dando el relleno de 80px desde la parte superior e inferior y 0px desde la izquierda y la derecha 0px al

Etiqueta para centrarlo alinearlo dentro del div.

Producción

El texto ha sido alineado con el centro con éxito.

Cómo alinear elementos usando la altura de la línea

Usando el mismo ejemplo que se indicó, también podemos alinear el texto utilizando la propiedad CSS Line-High-Hight.

CSS

.centro
Línea de altura: 200px;
Border: 3px Purple sólido;
Text-Align: Center;

.Centro P
Línea de altura: 1.5;
Pantalla: bloque en línea;

Simplemente establezca la altura de la línea del contenedor Div en 200px y luego establezca la altura de la línea de

elemento a 1.5.

Producción

Los elementos HTML se han alineado verticalmente, así como horizontalmente, utilizando la altura de línea.

Cómo alinear elementos verticalmente usando flexbox

Nuevamente estamos considerando el mismo ejemplo y utilizando FlexBox esta vez para alinear vertical y horizontalmente elementos.

CSS

.centro
Pantalla: Flex;
Justify-Content: Center;
Alineación de ítems: Centro;
Altura: 200px;
borde: 3px verde sólido;

Aquí, estamos configurando la visualización del contenedor DIV como Flex y Center alineando el contenido y los elementos presentes dentro del contenedor DIV utilizando las propiedades Justify-Content y Aline-items proporcionadas por el CSS Flex-Box. Además, también le brindamos algo de altura y borde.

Producción

El texto está alineado con éxito (tanto vertical como horizontalmente) usando FlexBox.

Conclusión

Hay varios enfoques disponibles en CSS para alinear los elementos HTML, como puede alinearlos verticalmente, así como horizontalmente, a la derecha, o la izquierda, o centrarse utilizando la propiedad de posición, la propiedad flotante, el relleno, la altura de línea o Flexbox, etc. Además, puede usar estas propiedades para alinear el texto y las imágenes que aparecen en su sitio web. Hemos discutido en detalle algunos enfoques diferentes a lo largo de ejemplos adecuados, que son útiles cuando se trata de la alineación del contenido en sus páginas web.