es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


CSS - margen: automático - Cómo funciona

Usar margin:auto para centrar un elemento de bloque horizontalmente es una técnica bien conocida. ¿Pero alguna vez te has preguntado por qué o cómo funciona? Para responder a esto, primero tenemos que echar un vistazo a cómo funciona el margen: automático. También en la mezcla está lo que el auto puede hacer en los márgenes, si funciona para el centrado vertical, y algunos otros problemas.

Pero primero, ¿qué hace auto realmente?

La definición de auto varía con los elementos, tipos de elementos y contexto . En los márgenes, auto puede significar una de dos cosas: ocupar el espacio disponible o 0 px. Estos dos definirán diferentes diseños para un elemento .

"automático" ocupando espacio disponible

Este es el uso más común de margin auto que encontramos a menudo. Al asignar auto a los márgenes izquierdo y derecho de un elemento, toman el espacio horizontal disponible en el contenedor del elemento por igual, y así el elemento se centra.

Sin embargo, esto solo funcionará para los márgenes horizontales (más sobre el porqué más adelante), y tampoco funcionará con los elementos flotantes y en línea y, por sí mismo, tampoco funcionará en los elementos posicionados absolutos y fijos (sin embargo, veremos cómo hacer que esos trabajen).

Faux Float tomando espacio disponible

Como el auto en los márgenes derecho e izquierdo ocupa el espacio "disponible" por igual, ¿qué crees que pasará cuando el valor auto se otorgue a solo uno de esos?

Un margen izquierdo o derecho con auto ocupará todo el espacio "disponible", haciendo que el elemento se vea como si hubiera sido barrido hacia la derecha o hacia la izquierda.

"Auto" calculado a 0px

Como se mencionó anteriormente, auto no funcionará en elementos flotantes, en línea y absolutos. Todos estos elementos ya han decidido sus diseños, por lo que no tiene sentido utilizar los márgenes auto y esperar que se centren así.

Eso frustrará el propósito inicial de usar algo como float . Por lo tanto, auto tendrá un valor de 0px en esos elementos.

auto tampoco funcionará en un elemento de bloque típico si no tiene un ancho. Todos los ejemplos que te mostré hasta ahora tienen anchuras.

Un ancho de valor auto tendrá márgenes de 0px . El ancho de un elemento de bloque normalmente cubre el contenedor cuando es auto o 100% y, por lo tanto, un margen auto se calculará en 0px en tal caso.

¿Qué sucede con los márgenes verticales con el valor auto ?

auto en ambos márgenes superior e inferior siempre se calcula a 0px (excepto para elementos absolutos). La especificación W3C lo dice así:

"Si" margin-top "o" margin-bottom "es" auto ", su valor utilizado es 0"

El por qué, bueno eso es hasta ahora, un misterio. Podría ser debido al flujo de página vertical típico, donde el tamaño de página aumenta en altura . Por lo tanto, centrar un elemento verticalmente en su contenedor no lo hará parecer centrado, en relación con la página en sí, a diferencia de cuando se hace de forma horizontal (en la mayoría de los casos).

Y tal vez sea por esta misma razón, decidieron agregar una excepción para elementos absolutos que se pueden centrar verticalmente a lo largo de toda la página.

También podría deberse al efecto de colapso del margen (un colapso de los "márgenes" de los elementos adyacentes), que es otra excepción para los márgenes verticales.

Sin embargo, este último parece ser un caso poco probable, ya que los elementos que no colapsan sus márgenes, como Flotantes, y los elementos con overflow no sean visible, aún asignan márgenes verticales de 0px para auto .

Centrar elementos absolutamente posicionados

Como sucede que hay una excepción para elementos absolutamente posicionados, usaremos el valor auto para centrar uno vertical y horizontalmente. Pero antes de eso, necesitamos saber cuándo funcionará el margin:auto realmente como queremos en un elemento absolutamente posicionado.

Aquí es donde entra otra especificación W3C:

"Si los tres de" izquierda ", " ancho "y" derecha "son" automáticos ": Primero configure los valores" automático "para" margen-izquierda "y" margen-derecho "en 0 ... "

"Si ninguno de los tres es" automático ": si tanto" margen-izquierda "como" margen-derecha "son" automáticos ", resuelva la ecuación bajo la restricción adicional de que los dos márgenes obtienen valores iguales"

Eso más o menos dice que para que los márgenes auto horizontales aprovechen espacios iguales, los valores de left, width y right no deberían ser auto, su valor predeterminado. Entonces, todo lo que tenemos que hacer es darles algo de valor en un elemento absolutamente posicionado. left y right deben tener valores iguales para un centrado perfecto .

La especificación también menciona algo similar para los márgenes verticales.

"Si los tres de" arriba ", " altura "y" abajo "son automáticos, ajuste" arriba "a la posición estática ..."

"Si ninguno de los tres es" auto ": si ambos" margin-top "y" margin-bottom "son" auto ", resuelve la ecuación bajo la restricción adicional de que los dos márgenes obtienen valores iguales ..."

Por lo tanto, para que un elemento absoluto se centre verticalmente, sus valores top, height e bottom no deben ser auto .

Ahora combinando todo esto, esto es lo que obtendremos:

Conclusión

Si alguna vez desea vaciar un elemento en su página hacia la derecha o hacia la izquierda sin los siguientes elementos que lo envuelven (como lo que sucede con float), recuerde que existe la opción de usar auto para los márgenes.

Convertir un elemento en absoluto para que se pueda centrar verticalmente puede no ser una gran idea. Hay otras opciones como flexbox y CSS transform que son más adecuadas para esas.

5 consejos de marketing en línea para la optimización de la tasa de conversión

5 consejos de marketing en línea para la optimización de la tasa de conversión

El objetivo final del diseño del sitio web es la conversión . La Optimización de la tasa de conversión o CRO es una práctica común seguida por los vendedores exitosos con el objetivo de convertir a los visitantes en clientes de pago .Contrariamente a la idea errónea de que el marketing en línea es costoso y solo los empresarios de alto perfil pueden pagarlo, CRO aumenta las tasas de conversión sin implicar gastos irrazonables .En esta

(Consejos de tecnología y diseño)

Los 10 pecados de los adictos a dispositivos móviles que molestan a todos

Los 10 pecados de los adictos a dispositivos móviles que molestan a todos

Es difícil negar el hecho de que los teléfonos inteligentes y las tabletas se han convertido en una parte esencial de nuestra vida cotidiana, cada vez más conectada . Sin embargo, esto no nos da a ninguno de nosotros una excusa para dejar que nuestros dispositivos móviles dominen nuestras vidas y olvidemos algunos aspectos básicos de la decencia y los modales. No

(Consejos de tecnología y diseño)