Alineación central: diseño CSS. Alineación vertical CSS para todos

Creo que muchos de ustedes que han tenido que lidiar con el diseño se han encontrado con la necesidad de alinear elementos verticalmente y conocen las dificultades que surgen al alinear un elemento con el centro.

Sí, para la alineación vertical existe una propiedad especial de alineación vertical en CSS con múltiples valores. Sin embargo, en la práctica no funciona como se esperaba. Intentemos resolver esto.

Comparemos los siguientes enfoques. Alineación usando:

• mesas,
• sangría,
• altura de línea
• extensión,
• margen negativo,
• transformar
• pseudo elemento
• caja flexible.

Para ilustrarlo, considere el siguiente ejemplo.

Hay dos elementos div, uno de ellos anidado dentro del otro. Démosles las clases correspondientes: exterior e interior.

El desafío es alinear el elemento interior con el centro del elemento exterior.

Primero, consideremos el caso en el que las dimensiones de los bloques externos e internos conocido. Agreguemos la regla display: inline-block al elemento interno y text-align: center y vertical-align: middle al elemento externo.

Recuerde que la alineación solo se aplica a elementos que tienen un modo de visualización en línea o en bloque en línea.

Establezcamos los tamaños de los bloques, así como los colores de fondo para que podamos ver sus bordes.

Exterior (ancho: 200 px; alto: 200 px; alineación de texto: centro; alineación vertical: medio; color de fondo: #ffc;) .inner (pantalla: bloque en línea; ancho: 100 px; alto: 100 px; color de fondo : #fcc;
Luego de aplicar los estilos, veremos que el bloque interior está alineado horizontalmente, pero no verticalmente:
http://jsfiddle.net/c1bgfffq/

¿Por qué sucedió esto? El caso es que la propiedad de alineación vertical afecta la alineación. el elemento en sí, no su contenido(excepto cuando se aplica a celdas de tabla). Por tanto, aplicar esta propiedad al elemento exterior no produjo nada. Además, aplicar esta propiedad a un elemento interno tampoco hará nada, ya que los bloques en línea están alineados verticalmente con respecto a los bloques adyacentes, y en nuestro caso tenemos un bloque en línea.

Existen varias técnicas para solucionar este problema. A continuación veremos más de cerca cada uno de ellos.

Alineación usando una tabla

La primera solución que me viene a la mente es sustituir el bloque exterior por una tabla de una celda. En este caso, la alineación se aplicará al contenido de la celda, es decir, al bloque interior.

http://jsfiddle.net/c1bgfffq/1/

La desventaja obvia de esta solución es que, desde un punto de vista semántico, es incorrecto utilizar tablas para la alineación. La segunda desventaja es que crear una tabla requiere agregar otro elemento alrededor del bloque exterior.

El primer inconveniente se puede eliminar parcialmente reemplazando la tabla y las etiquetas td con div y configurando el modo de visualización de la tabla en CSS.

.outer-wrapper (pantalla: tabla;) .outer (pantalla: tabla-celda;)
Sin embargo, el bloque exterior seguirá siendo una mesa con todas las consecuencias consiguientes.

Alineación mediante sangría

Si se conocen las alturas de los bloques interior y exterior, entonces la alineación se puede establecer utilizando las sangrías verticales del bloque interior mediante la fórmula: (H exterior – H interior) / 2.

Exterior (alto: 200 px;) .interior (alto: 100 px; margen: 50 px 0;)
http://jsfiddle.net/c1bgfffq/6/

La desventaja de la solución es que sólo es aplicable en un número limitado de casos cuando se conocen las alturas de ambos bloques.

Alineación usando altura de línea

Si sabe que el bloque interior no debe ocupar más de una línea de texto, puede utilizar la propiedad line-height y establecerla igual a la altura del bloque exterior. Dado que el contenido del bloque interno no debe ajustarse a la segunda línea, se recomienda agregar también las reglas de espacio en blanco: nowrap y overflow: oculto.

Exterior (altura: 200 px; altura de línea: 200 px;) .inner (espacio en blanco: nowrap; desbordamiento: oculto;)
http://jsfiddle.net/c1bgfffq/12/

Esta técnica también se puede utilizar para alinear texto de varias líneas si redefine el valor de altura de línea para el bloque interno y también agrega las reglas display: inline-block y vertical-align: middle.

Exterior (alto: 200 px; alto de línea: 200 px;). Interior (alto de línea: normal; pantalla: bloque en línea; alineación vertical: medio;)
http://jsfiddle.net/c1bgfffq/15/

La desventaja de este método es que se debe conocer la altura del bloque externo.

Alineación mediante "estiramiento"

Este método se puede utilizar cuando se desconoce la altura del bloque externo, pero se conoce la altura del bloque interno.

Para hacer esto necesitas:

1. establecer posicionamiento relativo al bloque externo y posicionamiento absoluto al bloque interno;
2. agregue las reglas top: 0 y bottom: 0 al bloque interior, como resultado de lo cual se extenderá a toda la altura del bloque exterior;
3. establezca el relleno vertical del bloque interior en automático.

.outer (posición: relativa;) .inner (altura: 100px; posición: absoluta; arriba: 0; abajo: 0; margen: auto 0;)
http://jsfiddle.net/c1bgfffq/4/

La idea detrás de esta técnica es que establecer una altura para un bloque estirado y en posición absoluta hace que el navegador calcule el relleno vertical en una proporción igual si está configurado en auto.

Alineación con margen superior negativo

Este método se ha vuelto ampliamente conocido y se utiliza con mucha frecuencia. Al igual que el anterior, se utiliza cuando se desconoce la altura del bloque exterior, pero se conoce la altura del interior.

Debe configurar el bloque externo en posicionamiento relativo y el bloque interno en posicionamiento absoluto. Luego debe mover el bloque interior hacia abajo la mitad de la altura de la parte superior del bloque exterior: 50% y elevarlo la mitad de su propia altura margen superior: -H interior / 2.

Exterior (posición: relativa;) .interior (altura: 100 px; posición: absoluta; superior: 50%; margen superior: -50 px;)
http://jsfiddle.net/c1bgfffq/13/

La desventaja de este método es que se debe conocer la altura de la unidad interior.

Alineación con transformación

Este método es similar al anterior, pero se puede utilizar cuando se desconoce la altura de la unidad interior. En este caso, en lugar de establecer un relleno de píxeles negativo, puede usar la propiedad de transformación y mover el bloque interno hacia arriba usando la función traducirY y un valor de -50%.

Exterior ( posición: relativa; ) .inner ( posición: absoluta; superior: 50%; transformación: traducirY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

¿Por qué fue imposible establecer el valor como porcentaje en el método anterior? Dado que los valores de margen porcentual se calculan en relación con el elemento principal, un valor del 50% sería la mitad de la altura del cuadro exterior y necesitaríamos elevar el cuadro interior a la mitad de su propia altura. La propiedad transform es perfecta para esto.

La desventaja de este método es que no se puede utilizar si la unidad interior tiene un posicionamiento absoluto.

Alineación con Flexbox

La forma más moderna de alineación vertical es utilizar Flexible Box Layout (conocido popularmente como Flexbox). Este módulo le permite controlar de manera flexible la posición de los elementos en la página, organizándolos casi en cualquier lugar. La alineación central para Flexbox es una tarea muy sencilla.

El bloque exterior debe configurarse para mostrar: flex y el bloque interior para margin: auto . ¡Y eso es todo! Hermoso, ¿no?

Exterior (pantalla: flex; ancho: 200 px; alto: 200 px;) .inner (ancho: 100 px; margen: automático;)
http://jsfiddle.net/c1bgfffq/14/

La desventaja de este método es que Flexbox sólo es compatible con los navegadores modernos.

¿Qué método debo elegir?

Debe comenzar desde el planteamiento del problema:

• Para alinear texto verticalmente, es mejor utilizar sangrías verticales o la propiedad de altura de línea.
• Para elementos absolutamente posicionados con una altura conocida (por ejemplo, iconos), el método con una propiedad de margen superior negativo es ideal.
• Para casos más complejos, cuando se desconoce la altura del bloque, es necesario utilizar un pseudoelemento o la propiedad de transformación.
• Bueno, si tienes tanta suerte que no necesitas admitir versiones anteriores del navegador IE, entonces, por supuesto, es mejor usar Flexbox.

Etiquetas: Agregar etiquetas

Centrar elementos verticalmente usando CSS es una tarea que presenta cierta dificultad para los desarrolladores. Sin embargo, existen varios métodos para solucionarlo, que son bastante sencillos. Esta lección presenta 6 opciones para centrar contenido verticalmente.

Comencemos con una descripción general del problema.

Problema de centrado vertical

El centrado horizontal es muy sencillo y fácil. Cuando el elemento centrado está en línea, usamos la propiedad de alineación relativa al elemento principal. Cuando el elemento está a nivel de bloque, configuramos su ancho y la configuración automática de los márgenes izquierdo y derecho.

La mayoría de las personas, cuando utilizan la propiedad text-align:, se refieren a la propiedad vertical-align para el centrado vertical. Todo parece bastante lógico. Si ha utilizado plantillas de tablas, probablemente haya hecho un uso extensivo del atributo valign, lo que refuerza la creencia de que la alineación vertical es la forma correcta de resolver el problema.

Pero el atributo valign sólo funciona en las celdas de la tabla. Y la propiedad de alineación vertical es muy similar. También afecta a las celdas de la tabla y a algunos elementos en línea.

El valor de la propiedad de alineación vertical es relativo al elemento en línea principal.

• En una línea de texto, la alineación es relativa a la altura de la línea.
• La celda de la tabla utiliza alineación relativa a un valor calculado mediante un algoritmo especial (normalmente la altura de la fila).

Pero desafortunadamente, la propiedad de alineación vertical no funciona en elementos a nivel de bloque (por ejemplo, párrafos dentro de un elemento div). Esta situación puede llevar a creer que no existe solución al problema del alineamiento vertical.

Pero existen otros métodos para centrar elementos de bloque, cuya elección depende de lo que se centra en relación con el contenedor exterior.

Método de altura de línea

Este método funciona cuando desea centrar verticalmente una línea de texto. Todo lo que tienes que hacer es configurar la altura de la línea para que sea mayor que el tamaño de fuente.

De forma predeterminada, el espacio en blanco se distribuirá uniformemente en la parte superior e inferior del texto. Y la línea quedará centrada verticalmente. A menudo, la altura de la línea se iguala a la altura del elemento.

HTML:

CSS:

#niño (alto de línea: 200px;)

Este método funciona en todos los navegadores, aunque sólo se puede utilizar para una línea. El valor 200 px en el ejemplo se eligió arbitrariamente. Puede utilizar cualquier valor mayor que el tamaño de fuente del texto.

Centrar una imagen usando la altura de línea

¿Qué pasa si el contenido es una imagen? ¿Funcionará el método anterior? La respuesta está en una línea más de código CSS.

HTML:

CSS:

#parent (altura de línea: 200px;) #parent img (alineación vertical: medio;)

El valor de la propiedad line-height debe ser mayor que la altura de la imagen.

Método de tabla CSS

Se mencionó anteriormente que la propiedad de alineación vertical se usa para celdas de tablas, donde funciona muy bien. Podemos mostrar nuestro elemento como una celda de tabla y usar la propiedad de alineación vertical para centrar verticalmente el contenido.

Nota: No es lo mismo una tabla CSS que una tabla HTML.

HTML:

CSS:

#parent (pantalla: tabla;) #child (pantalla: tabla-celda; alineación vertical: medio;)

Configuramos la salida de la tabla en el elemento div principal y generamos el elemento div anidado como una celda de la tabla. Ahora puede utilizar la propiedad de alineación vertical en el contenedor interior. Todo en él estará centrado verticalmente.

A diferencia del método anterior, en este caso el contenido puede ser dinámico ya que el elemento div cambiará de tamaño según su contenido.

La desventaja de este método es que no funciona en versiones anteriores de IE. Debe utilizar la propiedad display: inline-block para el contenedor anidado.

Posicionamiento absoluto y márgenes negativos

Este método también funciona en todos los navegadores. Pero requiere que al elemento que se centra se le dé una altura.

El código de ejemplo realiza el centrado horizontal y vertical al mismo tiempo:

HTML:

CSS:

#parent (posición: relativa;) #child ( posición: absoluta; arriba: 50%; izquierda: 50%; altura: 30%; ancho: 50%; margen: -15% 0 0 -25%; )

Primero, configuramos el tipo de posicionamiento del elemento. A continuación, configuramos las propiedades superior e izquierda del elemento div anidado al 50%, que corresponde al centro del elemento principal. Pero el centro es la esquina superior izquierda del elemento anidado. Por lo tanto, debe levantarlo (la mitad de la altura) y moverlo hacia la izquierda (la mitad del ancho), y luego el centro coincidirá con el centro del elemento padre. Por lo que en este caso es necesario conocer la altura del elemento. Luego configuramos el elemento con márgenes superior e izquierdo negativos iguales a la mitad de la altura y el ancho, respectivamente.

Este método no funciona en todos los navegadores.

Posicionamiento absoluto y estiramiento.

El código de ejemplo realiza un centrado vertical y horizontal.

HTML:

CSS:

#parent (posición: relativa;) #child ( posición: absoluta; arriba: 0; abajo: 0; izquierda: 0; derecha: 0; ancho: 50%; alto: 30%; margen: automático; )

La idea detrás de este método es estirar el elemento anidado hasta los 4 bordes del elemento principal estableciendo las propiedades superior, inferior, derecha e izquierda en 0.

Configurar el margen para que se genere automáticamente en todos los lados establecerá valores iguales en los 4 lados y centrará nuestro elemento div anidado en su elemento principal.

Desafortunadamente, este método no funciona en IE7 y versiones inferiores.

Espacios iguales arriba y abajo

En este método, el relleno igual se establece explícitamente en la parte superior e inferior del elemento principal.

HTML:

CSS:

#padre (relleno: 5% 0; ) #niño (relleno: 10% 0; )

El código CSS de ejemplo establece el relleno superior e inferior para ambos elementos. Para un elemento anidado, configurar el relleno servirá para centrarlo verticalmente. Y el relleno del elemento principal centrará el elemento anidado dentro de él.

Se utilizan unidades de medida relativas para cambiar el tamaño de los elementos dinámicamente. Y para unidades de medida absolutas tendrás que hacer cálculos.

Por ejemplo, si el elemento principal tiene una altura de 400 px y el elemento anidado es de 100 px, entonces se necesitan 150 px de relleno en la parte superior e inferior.

150 + 150 + 100 = 400

Usar % le permite dejar los cálculos al navegador.

Este método funciona en todas partes. La desventaja es la necesidad de realizar cálculos.

Nota: Este método funciona configurando el relleno exterior de un elemento. También puedes utilizar márgenes dentro de un elemento. La decisión de utilizar márgenes o relleno debe tomarse dependiendo de las características específicas del proyecto.

div flotante

Este método utiliza un elemento div vacío que flota y ayuda a controlar la posición de nuestro elemento anidado en el documento. Tenga en cuenta que el div flotante se coloca antes de nuestro elemento anidado en el código HTML.

HTML:

CSS:

#parent (alto: 250px;) #floater ( float: izquierda; alto: 50%; ancho: 100%; margen inferior: -50px; ) #child ( claro: ambos; alto: 100px; )

Desplazamos el div vacío hacia la izquierda o hacia la derecha y establecemos su altura al 50% de su elemento principal. De esta manera llenará la mitad superior del elemento padre.

Dado que este div es flotante, se elimina del flujo normal del documento y necesitamos desenvolver el texto en el elemento anidado. El ejemplo usa clear: Both , pero es suficiente usar la misma dirección que el desplazamiento de un elemento div flotante vacío.

El borde superior de un elemento div anidado está directamente debajo del borde inferior de un elemento div vacío. Necesitamos mover el elemento anidado hacia arriba la mitad de la altura del elemento vacío flotante. Para resolver el problema, utilice un valor de propiedad de margen inferior negativo para un elemento div flotante vacío.

Este método también funciona en todos los navegadores. Sin embargo, usarlo requiere un elemento div vacío adicional y conocimiento de la altura del elemento anidado.

Conclusión

Todos los métodos descritos son fáciles de usar. La dificultad es que ninguno de ellos es apto para todos los casos. Es necesario analizar el proyecto y elegir el que mejor se adapte a los requisitos.

El artículo de hoy tiene como objetivo mostrarte cómo centrar un div, tanto horizontal como verticalmente, usando algunos trucos de CSS. También le diremos cómo centrar en toda la página o en un elemento div individual.

Centra fácilmente un elemento DIV en la página

Este método funcionará perfectamente en todos los navegadores.

CSS

Center-div (margen: 0 automático; ancho: 100px;)

Ejemplo

El valor auto en la propiedad de margen establece el margen izquierdo y derecho para todo el espacio disponible en la página. Lo importante a recordar aquí es que el elemento div centrado debe tener un valor de ancho establecido.

Centrar un DIV dentro de un elemento DIV a la antigua usanza

Este método div de alineación central funcionará en todos los navegadores.

CSS

Outer-div (relleno: 30px;) .inner-div (margen: 0 auto; ancho: 100px;)

HTML

Ejemplo

El div exterior se puede colocar de la forma que desee, pero el div interior debe tener un ancho específico ( ancho).

Centrar un DIV dentro de un elemento DIV usando inline-block

En este método de centrar un div dentro de un div, no es necesario especificar el ancho del elemento interior. Funcionará en todos los navegadores modernos, incluido IE8.

CSS

Outer-div (relleno: 30px; alineación de texto: centro;) .inner-div (pantalla: bloque en línea; relleno: 50px;)

HTML

Ejemplo

La propiedad de alineación de texto solo funciona en elementos en línea. El valor de bloque en línea permite que el div interno se muestre como un elemento en línea y también como un bloque ( bloque en línea). La propiedad text-align en el elemento div exterior nos permitirá centrar el div interior.

Centrar un DIV dentro de un elemento DIV horizontal y verticalmente

Aquí margen: auto se usa para centrar el div en el centro de la página. El ejemplo funcionará en todos los navegadores modernos.

CSS

Outer-div (relleno: 30px;) .inner-div (margen: automático; ancho: 100px; alto: 100px;)

HTML

Ejemplo

El elemento div interno debe tener un ancho especificado ( ancho) y altura ( altura). El método no funcionará si el elemento div exterior tiene una altura fija.

Centrar el DIV en la parte inferior de la página.

Aquí margin: auto se usa para centrar el div verticalmente y el posicionamiento absoluto se usa para el elemento exterior. El método funcionará en todos los navegadores modernos.

CSS

Outer-div ( posición: absoluta; abajo: 30px; ancho: 100%; ) .inner-div ( margen: 0 auto; ancho: 100px; alto: 100px; color de fondo: #ccc; )

HTML

Ejemplo

El div interno debe tener un ancho establecido. El espacio en la parte inferior de la página se ajusta utilizando la propiedad inferior del div exterior. También puede centrar un div en la parte superior de la página reemplazando la propiedad inferior con la propiedad superior.

Centrar DIV en la página vertical y horizontalmente

Aquí, para centrar el div, volvemos a utilizar margen: posicionamiento automático y absoluto del div exterior. El método funcionará en todos los navegadores modernos.

CSS

Center-div (posición: absoluta; margen: automático; arriba: 0; derecha: 0; abajo: 0; izquierda: 0; ancho: 100px; alto: 100px;)

Ejemplo

El elemento div debe tener un ancho establecido ( ancho) y altura ( altura).

Realizar centrado adaptativo de un elemento DIV en la página

Aquí, para centrar el div usando CSS, hacemos que el ancho del elemento div responda para que responda a los cambios en el tamaño de la ventana. Este método funciona en todos los navegadores.

CSS

Center-div (margen: 0 automático; ancho máximo: 700px;)

Ejemplo

Un elemento div centrado debe tener establecida su propiedad de ancho máximo.

Centrar un DIV dentro de un elemento usando las propiedades del bloque interno

El elemento div interno aquí responde. Este método de centrar un div dentro de un div funcionará en todos los navegadores.

CSS

Outer-div (relleno: 30px;) .inner-div (margen: 0 auto; ancho máximo: 700px;)

HTML

Ejemplo

El div interno debe tener establecida su propiedad de ancho máximo.

Centrar dos divs receptivos uno al lado del otro

Aquí tenemos dos elementos div responsivos uno al lado del otro. Este método de colocar un div en el centro de la pantalla funcionará en todos los navegadores modernos.

CSS

Contenedor (text-align: center; ) .left-div ( display: inline-block; max-width: 300px; vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) pantalla y (ancho máximo: 600 px) ( .left-div, .right-div ( lef max-width: 100%; ) )

HTML

Ejemplo

Aquí tenemos varios elementos con la propiedad inline-block aplicada, ubicados dentro de un contenedor centrado. Este ejemplo también utiliza consultas de medios CSS; es decir, si el tamaño de la pantalla es inferior a 600 píxeles, entonces la propiedad de ancho máximo para el div izquierdo y derecho se establece en 100%.

Elemento DIV centrado usando Flexbox

Aquí centramos el div CSS usando Flexbox. Su objetivo es facilitar el proceso de desarrollo de diseños de interfaz de usuario. Este módulo es compatible con Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+, así como con el navegador Android 40+.

CSS

Contenedor (pantalla: flex; align-items: center; justificar-content: center; altura: 100vh;) .item (color de fondo: #f3f2ef; radio de borde: 3px; ancho: 200px; altura: 100px;)

¡Hola! Seguimos dominando los conceptos básicos del lenguaje HTML. Veamos qué necesitas escribir para alinear el texto al centro, al ancho o a los bordes.

Para ir al grano, veamos cómo centrar el texto en HTML de tres maneras diferentes. Los dos últimos están vinculados directamente a la hoja de estilo. Puede ser un archivo CSS que se conecta a las páginas del sitio y define su apariencia.

Método 1: trabajo directo con HTML

En realidad es bastante simple. Vea el ejemplo a continuación.

Alinea el párrafo al centro.

Si necesita mover fragmentos de texto de otra manera, en lugar del parámetro "centro", ingrese los siguientes valores:

• justificar: alinear el texto al ancho de la página;
• derecha – en el borde derecho;
• izquierda - a la izquierda.

Por analogía, puedes mover el contenido que está en los encabezados (h1, h2) y el contenedor (div).

Método 2 y 3: usar estilos

El diseño presentado arriba se puede transformar ligeramente. El efecto será el mismo. Para hacer esto, debe escribir el código a continuación.

Bloque de texto.

De esta forma, el código se escribe directamente en HTML para centrar el contenido del texto.

Existe otra forma alternativa de lograr resultados. Deberá seguir un par de pasos.

Paso 1. En el código principal escribe

Materiales de texto.

Paso 2. En el archivo CSS incluido, ingrese el siguiente código:

Rovno (alineación de texto:centro;)

Observo que la palabra "rovno" es solo el nombre de una clase que se puede llamar de otra manera. Esto queda a criterio del programador.

Por analogía, en HTML puedes centrar, justificar y alinear fácilmente el texto con el borde derecho o izquierdo de la página. Como puedes ver, hay mucho más de una opción para lograr tu objetivo.

Sólo algunas preguntas:

• ¿Estás realizando un proyecto de información sin fines de lucro?
• ¿Quieres que tu sitio web tenga una buena clasificación en los motores de búsqueda?
• ¿Quieres obtener ingresos en línea?

Si todas las respuestas son positivas, entonces basta con mirar un enfoque integrado para el desarrollo de sitios web. La información será especialmente útil si se ejecuta en el CMS de WordPress.

Me gustaría señalar que sus propios sitios web son sólo una de las muchas opciones para generar ingresos pasivos o activos en Internet. Mi blog está dedicado a las oportunidades financieras en línea.

¿Ha trabajado alguna vez en el campo del arbitraje de tráfico, redacción publicitaria y otras áreas de actividad que generan ingresos primarios o adicionales a través de la colaboración remota? Puedes aprender sobre esto y mucho más ahora mismo en las páginas de mi blog.

Publicaré mucha información realmente útil en el futuro. Manténgase conectado. Si lo deseas, puedes suscribirte a las actualizaciones de Workip por correo electrónico. El formulario de suscripción se encuentra a continuación.

Los diseñadores web utilizan DIV en su trabajo todos los días. Sin eufemismos, esta es la etiqueta más popular. Abra el código fuente de cualquier sitio web y verá que la mayoría, si no dos tercios, de los objetos están encerrados en