Métodos para la alineación central vertical en CSS. Todo sobre la alineación CSS

frase de la derecha

Oración usando fin

Para crear una línea roja solo necesitas conocer un parámetro.

Esta es la propiedad de sangría de texto simple.

¿Qué es DIV?

El nombre del elemento proviene de la palabra inglesa division, que significa división. Al escribir marcas, se utiliza para dividir elementos en bloques. Los DIV encierran grupos de contenido en una página web. Por ejemplo, imágenes, párrafos con texto. La etiqueta no afecta de ninguna manera la visualización del contenido y no tiene ninguna carga semántica.

DIV admite todos los atributos globales. Pero para el diseño web solo necesitas dos: clase e identificación. Sólo recordarás a los demás en casos exóticos, y eso no es un hecho. El atributo align, que solía usarse para centrar o alinear divs a la izquierda, ha quedado obsoleto.

Cuándo usar DIV

Imagine que el sitio es un refrigerador y los DIV son contenedores de plástico en los que debe clasificar el contenido. No pondrías fruta en el mismo recipiente que la paté de hígado. Colocarás cada tipo de producto por separado. El contenido web se genera de manera similar.

Abra cualquier sitio web y divídalo en bloques significativos. Encabezado arriba, pie de página abajo, texto principal en el centro. En el lateral suele haber una columna más pequeña con contenido publicitario o una nube de etiquetas.

Ahora mira cada sección con más detalle. Comience con el encabezado. El encabezado del sitio tiene un logotipo independiente, navegación, encabezado de primer nivel y, a veces, un eslogan. Asigne a cada bloque semántico su propio contenedor. Esto no sólo separará los elementos del flujo, sino que también facilitará su formato. Le resultará mucho más fácil centrar un objeto en una etiqueta DIV dándole una clase o ID.

Centrar DIV usando márgenes

Al representar elementos web, el navegador considera tres propiedades: relleno, margen y borde. El relleno es el espacio entre el contenido y su borde. Margen: campos que separan un objeto de otro. La frontera son las líneas a lo largo de los bloques. Se pueden asignar a todos a la vez o sólo a un lado:

Estas propiedades agregan espacio entre los objetos y le ayudan a alinearlos y colocarlos correctamente. Por ejemplo, si es necesario desplazar un bloque con una imagen desde el borde izquierdo al centro en un 20%, asigna un margen izquierdo al elemento con un valor del 20%:

Bloquear con img (margen izquierdo: 20%;)

Los elementos también se pueden formatear utilizando sus valores de ancho y relleno negativo. Por ejemplo, hay un bloque con dimensiones de 200 px por 200 px. Primero, asignémosle una posición absoluta y movámoslo al centro un 50%.

Div( posición: absoluta; izquierda: 50%; )

Ahora, para asegurarnos de que el DIV centrado esté perfectamente posicionado, le damos un margen negativo a la izquierda igual al 50% de su ancho, es decir -100 píxeles:

Margen izquierdo: -100px;

En CSS esto se llama "eliminación de aire". Pero tiene un inconveniente importante: la necesidad de realizar cálculos constantes, lo cual es bastante difícil de hacer para elementos con varios niveles de anidamiento. Si se especifican los valores de relleno y ancho de borde, el navegador calculará de forma predeterminada las dimensiones del contenedor como la suma del grosor de los bordes, el relleno a la derecha e izquierda y el contenido en sí dentro, lo que puede también viene como una sorpresa.

Entonces, cuando necesite centrar un DIV, use la propiedad box-sizing con el valor border-box. Esto evitará que el navegador agregue valores de relleno y borde al ancho total del elemento DIV. Para subir o bajar un elemento, utilice también valores negativos. Pero en este caso, se pueden asignar al campo superior o inferior del contenedor.

Cómo centrar un bloque DIV usando márgenes automáticos

Esta es una manera fácil de centrar bloques grandes. Simplemente asigna el ancho del contenedor y la propiedad de margen a automático. El navegador colocará un bloque en el medio con márgenes iguales a la izquierda y a la derecha, haciendo todo el trabajo por sí mismo. Como resultado, no corre el riesgo de confundirse en los cálculos matemáticos y ahorra mucho tiempo.

Utilice el método de campo automático cuando desarrolle aplicaciones responsivas. Lo principal es asignar un valor de ancho al contenedor en em o porcentaje. El código del ejemplo anterior centrará el DIV y en cualquier dispositivo, incluidos los teléfonos móviles, ocupará el 90% de la pantalla.

Alineación mediante propiedad de visualización: bloque en línea

De forma predeterminada, los elementos DIV se consideran elementos de bloque y su valor de visualización es bloque. Para este método deberá anular esta propiedad. Sólo apto para DIV con un contenedor principal:

A un elemento con la clase external-div se le asigna una propiedad de alineación de texto con un valor de centro, que centra el texto en el interior. Pero por ahora el navegador ve el DIV anidado como un objeto de bloque. Para que la propiedad text-align funcione, el div interno debe tratarse como minúscula. Entonces, en la tabla CSS para el selector de div interno, escribe el siguiente código:

Inner-div (pantalla: bloque en línea;)

Cambia la propiedad de visualización de bloque a bloque en línea.

método de transformación/traducción

Las hojas de estilo en cascada permiten mover, sesgar, rotar y transformar elementos web a voluntad. Para ello se utiliza la propiedad transform. Los valores indican el tipo y grado de transformación deseado. En este ejemplo trabajaremos con traducir:

La función de traducción mueve un elemento desde su posición actual hacia la izquierda/derecha y hacia arriba/abajo. Se pasan dos valores entre paréntesis:

• grado de movimiento horizontal;
• grado de movimiento vertical.

Si es necesario mover un elemento solo a lo largo de uno de los ejes de coordenadas, después de la palabra traducir se indica el nombre del eje y entre paréntesis la cantidad del desplazamiento requerido:

Transformar: traducirY(-20%);

En algunos manuales puedes encontrar transformaciones con prefijos de proveedores:

Transformación de Webkit: traducir (50%, 50%); -ms-transform: traducir(50%, 50%); transformar: traducir (50%, 50%);

En 2018, esto ya no es necesario; la propiedad es compatible con todos los navegadores, incluidos Edge e IE.

Para poder centrar el DIV que queremos, la función de traducción CSS se escribe con un valor del 50% para el eje vertical y horizontal. Esto hará que el navegador desplace el elemento de su posición actual a la mitad de su ancho y alto. Se deben especificar las propiedades de ancho y alto:

Tenga en cuenta que el elemento al que se aplica la propiedad de transformación se mueve independientemente de los objetos que lo rodean. Por un lado, esto es conveniente, pero a veces, al moverse, el DIV puede superponerse a otro contenedor. Por lo tanto, este método de centrar componentes web se considera no estándar y se utiliza sólo en casos de extrema necesidad. Para la animación se utilizan transformaciones según todos los cánones de CSS.

Trabajar con el diseño Flexbox

Flexbox se considera una forma sofisticada de diseñar diseños web. Pero si lo dominas, te darás cuenta de que es mucho más sencillo y agradable que los métodos de formato estándar. La especificación Flexbox es una forma flexible e increíblemente poderosa de manejar elementos. El nombre del módulo se traduce del inglés como "contenedor flexible". Los valores de ancho, alto y disposición de los elementos se ajustan automáticamente, sin calcular sangrías ni márgenes.

En ejemplos anteriores, ya trabajamos con la propiedad de visualización, pero la configuramos en valores de bloque y bloque en línea. Para crear diseños flexibles usaremos display:flex. Primero necesitamos un contenedor flexible:

Para convertirlo a un contenedor flexible en tablas en cascada, escribimos:

Contenedor flexible (pantalla: flex;)

Todos los objetos anidados, pero sólo los descendientes directos, serán elementos flexibles:

Si coloca una lista dentro de un contenedor flexible, los elementos de la lista li no se consideran elementos flexibles. El diseño de Flexbox solo funcionará en ul:

Reglas para colocar elementos flexibles.

Para administrar elementos flexibles, necesita justificar contenido y alinear elementos. Dependiendo de los valores que especifique, estas dos propiedades colocan automáticamente los objetos según sea necesario. Si necesitamos centrar todos los DIV anidados, escribimos justify-content: center, align-items: center y nada más. El navegador hará el resto del trabajo por sí mismo:

Para centrar el texto en DIV que son elementos flexibles, puede utilizar la técnica estándar de alineación de texto. O puede hacer que cada DIV anidado también sea un contenedor flexible y administrar el contenido usando justify-content. Este método es mucho más racional si incluye una variedad de contenido, incluidos gráficos, otros objetos anidados, incluidas listas de varios niveles.

Del autor: Os doy la bienvenida nuevamente a las páginas de nuestro blog. En el artículo de hoy me gustaría hablar sobre varias técnicas de alineación que se pueden aplicar tanto a los bloques como a su contenido. En particular, cómo alinear bloques en CSS, así como la alineación de texto.

Alinear bloques al centro

En CSS, centrar un bloque es fácil. Esta es la técnica más conocida para muchos, pero me gustaría hablar de ella ahora mismo, antes que nada. Esto significa alineación centrada horizontalmente con respecto al elemento principal. ¿Cómo se hace? Digamos que tenemos un contenedor y nuestro sujeto experimental está en él:

Supongamos que este es el encabezado del sitio. No se extiende por todo el ancho de la ventana y debemos centrarlo. Escribimos así:

Necesitamos especificar el ancho exacto o máximo y luego escribir la propiedad clave: margen: 0 auto. Establece los márgenes exteriores de nuestro encabezado, el primer valor determina los márgenes superior e inferior, y el segundo determina los márgenes derecho e izquierdo. El valor auto le dice al navegador que calcule automáticamente el relleno en ambos lados para que el elemento esté exactamente centrado en su padre. ¡Cómodo!

Alineación de texto

Esta también es una técnica muy sencilla. Para alinear todos los elementos en línea, puede usar la propiedad text-align y sus valores: izquierda, derecha, centro. Este último centra el texto, que es lo que necesitamos. Incluso puedes alinear una imagen de la misma manera, porque también es un elemento en línea por defecto.

Alinear el texto verticalmente

Pero esto es más complicado. De forma predeterminada, no existe una propiedad simple y conocida que centre fácilmente el texto verticalmente en un contenedor de bloques. Sin embargo, existen varias técnicas que los maquetadores han ideado a lo largo de los años.

Establezca la altura del bloque usando relleno. La forma no es establecer una altura explícita usando la altura, sino crearla artificialmente usando rellenos en la parte superior e inferior, que deberían ser iguales. Creemos cualquier bloque y escribamos en él las siguientes propiedades:

div(fondo: #ccc; relleno: 30px 0; )

El fondo es sólo para mostrar visualmente los bordes y el relleno. Ahora la altura del bloque se compone de estas dos sangrías y la línea misma, y ​​todo se ve así:

Defina la altura de línea para el bloque. Creo que esta es una forma más correcta si necesitas alinear una línea de texto. Con él, puedes escribir la altura de forma normal, usando la propiedad de altura. Después de esto, también necesita establecer la altura de la línea, la misma que la altura del bloque en su conjunto.

div (altura: 60 px; altura de línea: 60 px;)

El resultado será similar a la imagen de arriba. Todo funcionará incluso si agrega relleno. Sin embargo, sólo para una línea. Si necesita más texto en el elemento, este método no funcionará.

Convierte un bloque en una celda de tabla. La esencia de este método es que la celda de la tabla tiene la propiedad vertical-align: middle, que centra el elemento verticalmente. En consecuencia, en este caso el bloque debe configurarse de la siguiente manera:

div (pantalla: celda de tabla; alineación vertical: medio;)

Este método es bueno porque puedes alinear todo el texto que quieras en el centro. Pero es mejor escribir display: table en el bloque en el que está anidado nuestro div; de lo contrario, es posible que no funcione.

Bueno, aquí llegamos a la última técnica de hoy: esta es la alineación vertical de los propios bloques. Hay que decir que, una vez más, no existe ninguna propiedad destinada específicamente a esto, pero hay algunos trucos que debes conocer.

Establezca sangrías como porcentaje. Si conoce la altura de un elemento principal y coloca otro elemento de bloque dentro de él, puede centrarlo usando un porcentaje de relleno. Por ejemplo, el padre tiene una altura de 600 píxeles. Colocas un bloque en él que tiene 300 píxeles de alto. ¿Cuánto necesitas retroceder en la parte superior e inferior para centrarlo? 150 píxeles cada uno, que es el 25% de la altura de los padres.

Este método permite la alineación sólo cuando las dimensiones permiten realizar cálculos. Y si tu padre tiene 887 píxeles de altura, entonces no podrás registrar nada con precisión, esto ya está claro.

Insertar un elemento en una celda de la tabla. Nuevamente, si transformamos el elemento principal en una celda de la tabla, el bloque insertado en él se centrará automáticamente verticalmente. Para hacer esto, el padre solo necesita configurar vertical-align: middle.

Y si, además de esto, también escribimos margen: 0 auto, ¡entonces el elemento quedará centrado horizontalmente!