Hogar › Tarifas › CSS de centrado vertical. Alinear el bloque con el centro de la página.

CSS de centrado vertical. Alinear el bloque con el centro de la página.

Alinear texto verticalmente en CSS es un trabajo bastante complicado. He visto a suficientes personas luchar con esto y constantemente encuentro errores "críticos" cuando se trata del diseño responsivo real.

Pero no temas: si ya estás luchando con la alineación vertical de CSS, has venido al lugar correcto.

Hablemos de la propiedad de alineación vertical de CSS.

Cuando comencé a trabajar en desarrollo web, tuve algunos problemas con esta propiedad. Pensé que debería funcionar como la clásica propiedad "alinear texto". Oh, si todo fuera tan simple...

La propiedad CSS de alineación vertical funciona bien con tablas, pero no con divs u otros elementos. Cuando lo usas en un div, alinea el elemento en relación con otros divs, pero no con su contenido. En este caso, la propiedad sólo funciona con display: inline-block; .

Ver ejemplo

¡Queremos centrar el contenido, no el div en sí!

Tienes dos opciones. Si solo tiene divs de texto, puede usar la propiedad line-height. Esto significa que necesita saber la altura del elemento, pero no puede configurarla. De esta manera tu texto siempre estará en el centro.

Sin embargo, este enfoque de alineación vertical de CSS tiene un inconveniente. Si el texto tiene varias líneas, la altura de la línea se multiplicará por el número de líneas. Lo más probable es que, en este caso, termines con una página terriblemente diseñada.

Echa un vistazo a este ejemplo.

Si el contenido que desea centrar consta de más de una línea, entonces es mejor usar divs de tabla. También puedes utilizar tablas, pero esto no es semánticamente correcto. Si necesita pausas para fines de respuesta, es mejor utilizar elementos div.

Para que esto funcione, debe haber un contenedor principal con display: table y dentro de él el número deseado de columnas que desea centrar usando display: table-cell y vertical-align: middle.

Ver ejemplo

¿Por qué funciona esto con el marcado de la tabla pero no con los elementos div? Porque las filas de la tabla tienen la misma altura. Cuando el contenido de una celda de una tabla no utiliza todo el espacio de altura disponible, el navegador agrega automáticamente un relleno vertical para centrar el contenido.

propiedad de posición

Comencemos con los conceptos básicos de la alineación vertical de divs CSS:

posición: estática es la predeterminada. El elemento se representa según el orden HTML;
posición: absoluta: se utiliza para determinar la posición exacta de un elemento. Esta posición siempre está relacionada con el elemento principal posicionado relativamente más cercano (no estático). Si no determinas la posición exacta de un elemento, perderás el control sobre él. Aparecerá de forma aleatoria, ignorando por completo el flujo del documento. De forma predeterminada, el elemento aparece en la esquina superior izquierda;
posición: relativa: se utiliza para colocar un elemento en relación con su posición normal (estática). Este valor conserva el orden del flujo de documentos;
posición: fija: se utiliza para colocar el elemento en relación con la ventana del navegador para que siempre esté visible en la ventana gráfica.

Nota: Algunas propiedades (superior e índice z) solo funcionan si el elemento está configurado en posición (no estático).

¡Pongámonos manos a la obra!

¿Quieres implementar la alineación central vertical de CSS? Primero cree un elemento con posición y dimensiones relativas. Por ejemplo: 100% en ancho y alto.

El segundo paso puede variar según los navegadores de destino, pero puede utilizar una de dos opciones:

Propiedad antigua: es necesario saber el tamaño exacto de la ventana para eliminar la mitad del ancho y la mitad del alto. Mira el ejemplo;
Nueva propiedad CSS3: puedes agregar una propiedad de transformación con un valor de traducción del 50% y el bloque siempre estará en el centro. Ver ejemplo.

Básicamente, si deseas centrar el contenido, nunca uses top: 40% o left: 300px. Esto funciona bien en las pantallas de prueba, pero no está centrado.

¿Recuerda la posición: fija? Puede hacer lo mismo con él que con una posición absoluta, pero no necesita una posición relativa para el elemento principal; siempre estará ubicado en relación con la ventana del navegador.

¿Has oído hablar de la especificación flexbox?

Puedes usar flexbox. Esto es mucho mejor que cualquier otra opción de alineación de texto central vertical de CSS. Con flexbox, gestionar elementos es como un juego de niños. El problema es que es necesario descartar algunos navegadores como IE9 y las versiones siguientes. A continuación se muestra un ejemplo de cómo centrar verticalmente un bloque:

Ver ejemplo

Con un diseño de caja flexible, puede centrar varios bloques.

Si aplica lo que ha aprendido de estos ejemplos, podrá dominar la alineación de bloques verticales de CSS en poco tiempo.

Enlaces y lecturas adicionales

Aprender el marcado CSS

Rana FlexBox

Caja de arena flexible

La traducción del artículo “CSS Vertical Align for Everyone (Dummies incluidos)” fue preparada por el amigable equipo del proyecto.

Cuántas copias ya se han roto de la tarea de alinear elementos en una página. Les traigo una traducción de un excelente artículo con una solución a este problema de Stephen Shaw para Smashing Magazine: centrado absoluto horizontal y vertical en CSS.

Todos conocíamos el margen: 0 auto;

para centrado horizontal, pero margen: auto;
No funcionó para vertical. Esto se puede solucionar fácilmente simplemente configurando la altura y aplicando los siguientes estilos:

Centro-absoluto (margen: automático; posición: absoluta; arriba: 0; izquierda: 0; abajo: 0; derecha: 0;)

No soy el primero en proponer esta solución, pero este enfoque rara vez se utiliza para la alineación vertical. En los comentarios al artículo Cómo centrar cualquier cosa con CSS, Simon enlaza a un ejemplo de jsFiddle que proporciona una excelente solución para el centrado vertical. Aquí hay algunos más sobre este tema.

Echemos un vistazo más de cerca al método.
Ventajas
Compatibilidad entre navegadores (incluido IE 8-10)
Sin marcas adicionales, estilo mínimo
Adaptabilidad

Independencia del relleno (¡sin tamaño de caja!)

Trabajos para imágenes.
Defectos
Se debe especificar la altura (ver Altura variable)

Se recomienda configurar overflow: auto para que el contenido no se extienda

No funciona en Windows Phone

Compatibilidad del navegador El método ha sido probado y funciona muy bien en Chrome, Firefox, Safari, Mobile Safari e incluso IE 8-10. Un usuario mencionó que el contenido no se alinea verticalmente en Windows Phone. Dentro de un contenedor El contenido colocado en un contenedor con posición: relativa se alineará bien:

Centro-absoluto (ancho: 50%; alto: 50%; desbordamiento: automático; margen: automático; posición: absoluta; arriba: 0; izquierda: 0; abajo: 0; derecha: 0;)

Usando la ventana gráfica Establezca el contenido en la posición: fija y establezca el índice z:

Absolute-Center.is-Fixed (ancho: 50%; alto: 50%; desbordamiento: automático; margen: automático; posición: fijo; arriba: 0; izquierda: 0; abajo: 0; derecha: 0; índice z: 999;

Desplazamientos Si el sitio tiene un encabezado fijo o necesita hacer alguna otra sangría, solo necesita agregar código como top: 70px a los estilos.

Mientras el margen está configurado: auto;

el bloque de contenido quedará correctamente centrado en altura.

También puedes alinear el contenido al lado deseado, dejándolo centrado en altura. Para hacer esto necesitas usar right: 0; izquierda: automático;
para alineación derecha o izquierda: 0; derecha: automático;

para alineación izquierda.

Absolute-Center.is-Right (ancho: 50%; alto: 50%; margen: automático; desbordamiento: automático; posición: absoluta; arriba: 0; izquierda: automático; abajo: 0; derecha: 20px; alineación de texto: bien;

Mucho contenido Para garantizar que una gran cantidad de contenido no permita que el diseño diverja, utilizamos overflow: auto . Aparecerá una barra de desplazamiento vertical. También puedes agregar altura máxima: 100%;

si el contenido no tiene relleno adicional.

.Absolute-Center.is-Overflow (ancho: 50%; alto: 300px; altura máxima: 100%; margen: automático; desbordamiento: automático; posición: absoluta; arriba: 0; izquierda: 0; abajo: 0; derecha : 0; )
Imágenes ¡Este método también funciona muy bien con imágenes! Agregar altura de estilo: automático;
entonces la imagen se escalará junto con el contenedor.

Absolute-Center.is-Image ( ancho: 50%; alto: automático; margen: automático; posición: absoluta; arriba: 0; izquierda: 0; abajo: 0; derecha: 0; )

Altura variable El método descrito requiere una altura de bloque determinada, que puede especificarse como un porcentaje y controlarse mediante max-height, lo que hace que el método sea ideal para sitios responsivos. Una forma de no establecer la altura es usar display: table . En este caso, el bloque de contenido está centrado independientemente del tamaño.

Es-Negativo ( ancho: 300px; alto: 200px; relleno: 20px; posición: absoluta; arriba: 50%; izquierda: 50%; margen izquierdo: -170px; /* (ancho + relleno)/2 */ margen- arriba: -120px; /* (alto + relleno)/2 */ )
Ventajas:

Compatibilidad entre navegadores
código mínimo

Defectos:

No adaptativo
El diseño se arrastra si hay demasiado contenido en el contenedor
Tienes que compensar el relleno o usar box-sizing: border-box

Usando transform Uno de los métodos más simples, admite cambios de altura. Hay un artículo detallado sobre este tema: "Centrado de elementos de ancho/alto porcentual" de CSS-Tricks.

Está transformado (ancho: 50%; margen: automático; posición: absoluta; arriba: 50%; izquierda: 50%; -webkit-transform: traducir(-50%,-50%); -ms-transform: traducir( -50%,-50%); transformar: traducir(-50%,-50%);
Ventajas:

altura variable
código mínimo

Defectos:

No funciona en IE 8
Usando prefijos
Puede interferir con otros efectos de transformación.
En algunos casos, los bordes de los bloques y el texto aparecen borrosos durante el renderizado.

Table-cell Quizás una de las mejores y más sencillas formas. Descrito en detalle en el artículo "Centrado vertical de altura flexible con CSS, más allá de IE7" de 456bereasttreet. El principal inconveniente es el marcado adicional: se requieren tres elementos:

CSS:
.Pos-Container.is-Table ( mostrar: tabla; ) .is-Table .Table-Cell ( mostrar: tabla-celda; vertical-align: medio; ) .is-Table .Center-Block ( ancho: 50%; margen: 0 automático;
Ventajas:

altura variable
El diseño no funciona cuando hay una gran cantidad de texto en un bloque
Compatibilidad entre navegadores

Defectos:

Estructura compleja

Flexbox El futuro de CSS, flexbox resolverá muchos de los problemas de diseño actuales. Esto está escrito en detalle en un artículo de Smashing Magazine llamado Centrar elementos con Flexbox.

Pos-Container.is-Flexbox (pantalla: -webkit-box; pantalla: -moz-box; pantalla: -ms-flexbox; pantalla: -webkit-flex; pantalla: flex; -webkit-box-align: centro; - moz-box-align: centro; -ms-flex-align: centro; -webkit-align-items: centro; -webkit-box-pack: centro; : centro; justificar-contenido: centro)
Ventajas:

El contenido puede tener cualquier alto o ancho.
Se puede utilizar en casos más complejos.

Defectos:

Sin soporte para IE 8-9
Requiere contenedor o estilos en el cuerpo.
Requiere una amplia variedad de prefijos para funcionar correctamente en los navegadores modernos
Posibles problemas de rendimiento

Conclusión Cada método tiene ventajas y desventajas. Básicamente, la elección se reduce a elegir qué navegadores deben ser compatibles.

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 pensar 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:

Texto requerido

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: una tabla CSS no es lo mismo que una tabla HTML.

HTML:

Contenido

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:

Contenido

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:

Contenido

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 extender el elemento anidado a 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:

Contenido

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 del 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:

Contenido

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 (ancho) y alto (alto) especificados. 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 (ancho) y un alto (alto).

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;)

Si ingresa a cualquier sitio web creado en base a HTML, verá una determinada estructura en capas. Además, su aspecto será similar al de un bizcocho en capas. Si crees que sí, lo más probable es que no hayas comido en mucho tiempo. Así que primero satisface tu hambre y luego te diremos cómo centrar una capa div en tu sitio:

Ventajas del diseño mediante una etiqueta

Hay dos tipos principales de estructura de sitio web:

Tabular;
Bloquear.

El diseño tabular era dominante incluso en los albores de Internet. Sus ventajas incluyen la precisión del posicionamiento especificado. Pero, sin embargo, tiene deficiencias evidentes. Los principales son la longitud del código y la baja velocidad de carga.

Cuando se utiliza el diseño tabular, la página web no se mostrará hasta que esté completamente cargada. Mientras que cuando se utilizan bloques div, los elementos se muestran inmediatamente.

Además de la alta velocidad de carga, la construcción en bloque de un sitio web le permite reducir varias veces la cantidad de código html. Incluso mediante el uso de clases CSS.

Sin embargo, se debe utilizar un diseño tabular para estructurar la visualización de datos en la página. Un ejemplo clásico de su uso es la visualización de tablas.

La construcción de bloques basada en etiquetas también se denomina capa por capa, y los bloques en sí se denominan capas. Esto se debe a que cuando se utilizan ciertos valores de propiedad, se pueden apilar uno encima del otro, de manera similar a las capas en Photoshop.

Ayudas de posicionamiento

En el diseño de bloques, es mejor colocar las capas utilizando hojas de estilo en cascada. La principal propiedad CSS responsable del diseño es flotante.
Sintaxis de propiedad:
flotador: izquierda | derecha | ninguno | heredar
Dónde:

izquierda: alinea el elemento con el borde izquierdo de la pantalla. El flujo alrededor de los elementos restantes se produce a la derecha;
derecha – alineación a la derecha, flujo alrededor de otros elementos – a la izquierda;
ninguno: no se permite envolver;
heredar: hereda el valor del elemento padre.

Veamos un ejemplo sencillo de posicionamiento de divs usando esta propiedad:

#left (ancho: 200px; alto: 100px; float: izquierda; fondo: rgb(255,51,102); ) #right (ancho: 200px; alto: 100px; float: derecha; fondo: rgb(0,255,153); ) Bloque izquierdo bloque derecho

Ahora intentaremos usar la misma propiedad para posicionar el tercer div en el centro de la página. Pero lamentablemente el float no tiene un valor central. Y cuando le das a un nuevo bloque un valor de alineación hacia la derecha o hacia la izquierda, se desplaza en la dirección especificada. Por lo tanto, todo lo que queda es establecer float: left en los tres bloques:

Pero esta tampoco es la mejor opción. Cuando se reduce el tamaño de la ventana, todas las capas se alinean en una fila verticalmente, y cuando se aumenta el tamaño, se adhieren al borde izquierdo de la ventana. Entonces necesitamos una mejor manera de centrar el div.

Centrar capas

En el siguiente ejemplo, usaremos una capa contenedora en la que colocaremos el resto de elementos. Esto resuelve el problema de los bloques que se mueven entre sí cuando se cambia el tamaño de la ventana. Centrar el contenedor en el medio se realiza estableciendo las propiedades de margen en cero para los márgenes desde el borde superior y automático en los lados (margen: 0 auto):

#container (ancho: 600px; margen: 0 auto;) #left (ancho: 200px; alto: 100px; float: izquierda; fondo: rgb(255,51,102); ) #right (ancho: 200px; alto: 100px; float : izquierda; fondo: rgb(0,255,153); #center (ancho: 200px; alto: 100px; float: izquierda; fondo: rgb(255,0,0); ) Bloque izquierdo Bloque central Bloque derecho

El mismo ejemplo muestra cómo puedes centrar un div horizontalmente. Y si edita un poco el código anterior, puede lograr la alineación vertical de los bloques. Para hacer esto, solo necesita cambiar la longitud de la capa del contenedor (reducirla). Es decir, después de editar su clase CSS debería verse así:

Después del cambio, todos los bloques se alinearán estrictamente en una fila en el medio. Y su posición no cambiará independientemente del tamaño de la ventana del navegador. Así es como se ve centrar verticalmente un div:

En el siguiente ejemplo, utilizamos una serie de nuevas propiedades CSS para centrar capas dentro de un contenedor:

#container (ancho: 450px; alto:150px; margen:0 auto; color de fondo:#66CCFF; ) #left (ancho: 100px; alto: 100px; fondo: rgb(255,51,102); pantalla: bloque en línea; alineación vertical: medio; margen izquierdo: 35px;) #derecha (ancho: 100px; alto: 100px; fondo: rgb(0,255,153); pantalla: bloque en línea; alineación vertical: medio; margen izquierdo: 35px;) #center (ancho: 100px; alto: 100px; fondo: rgb(255,0,0); pantalla: bloque en línea; alineación vertical: medio; margen izquierdo: 35px;)

Una breve descripción de las propiedades CSS y sus valores que usamos en este ejemplo para centrar un div dentro de un div:

display: inline-block: alinea un elemento de bloque en una línea y garantiza que se ajuste alrededor de otro elemento;
alineación vertical: medio: alinea el elemento en el medio en relación con el padre;
margen izquierdo: establece el margen izquierdo.

Cómo hacer un enlace desde una capa

Por extraño que parezca, esto es posible. A veces, puede ser necesario un bloque div como enlace al diseñar varios tipos de menús. Veamos un ejemplo práctico de implementación de una capa de enlace:

#layer1( ancho: 500px; alto: 100px; fondo: rgb(51,255,204); borde: surco; ) a ( pantalla: bloque; alineación de texto: centro; alto: 100%; color: rgb(255,0,51) ; ) Enlace a nuestro sitio web

En este ejemplo, usando la línea display: block, configuramos el enlace al valor de un elemento de bloque. Y para que toda la altura del bloque div se convierta en un enlace, establezca la altura: 100%.

Ocultar y mostrar elementos de bloque

Los elementos de bloque brindan más oportunidades para expandir la funcionalidad de la interfaz que el diseño tabular obsoleto. A menudo sucede que el diseño del sitio web es único y reconocible. Pero por algo tan exclusivo hay que pagar con falta de espacio libre.

Esto es especialmente cierto en el caso de la página principal, cuyo coste de publicidad es el más alto. Por tanto, surge el problema de dónde “empujar” otro banner publicitario. ¡Y aquí no puedes salirte con la tuya alineando el div con el centro de la página!

Una solución más racional es ocultar algún bloque. Aquí hay un ejemplo simple de tal implementación:

#capa1( pantalla:bloque; ancho: 500px; alto: 100px; fondo: rgb(51,255,204); borde:groove; ) función mostrar() ( if(capa1=="ninguno") ( capa1="bloque"; ) else ( capa1="ninguno"; ) document.getElementById("capa1").style.display=capa1 )

Este es el botón mágico. Al hacer clic en él, se ocultará o mostrará el bloque oculto.

En este ejemplo, la ubicación de los bloques div no cambia de ninguna manera. Esto utiliza una función de JavaScript simple que cambia el valor de la propiedad de visualización CSS después de hacer clic en un botón (evento onclick).

Como puede ver, esta propiedad puede adoptar muchos valores. Por tanto es muy útil y se puede utilizar para posicionar elementos. En uno de los ejemplos anteriores, usamos uno de sus valores (inline-block) para centrar un div dentro de un div.

Usamos dos valores de propiedad de visualización para ocultar y mostrar la capa.

Popular en la categoría: