Cuando se trata de escribir sobre desarrollo, no suelo hablar de cosas m\u00e1s all\u00e1 de PHP y JavaScript, principalmente porque trabajo con esos lenguajes m\u00e1s que con otros.<\/p>\n
Quiero decir, s\u00ed, CSS es parte del trato al igual que HTML, pero se espera en estos d\u00edas, \u00bfverdad?<\/p>\n
Entonces, si alguna vez tuve un consejo r\u00e1pido para ofrecer con respecto a CSS, es este (aunque tal vez deber\u00eda escribir m\u00e1s). Es dif\u00edcil cuando Chris<\/a><\/strong> hace un trabajo incre\u00edble ejecutando CSS Tricks<\/a><\/strong>, pero estoy divagando.<\/p>\n De todos modos, aqu\u00ed est\u00e1 el problema y la soluci\u00f3n.<\/p>\n La idea de centrar din\u00e1micamente un elemento se basa en el siguiente escenario:<\/p>\n Tal vez esto es todav\u00eda un poco general. Si es as\u00ed, supongamos que tiene una lista (ordenada o desordenada, no importa). Tienen una altura y un ancho fijos, y vas a colocar las im\u00e1genes, escaladas, dentro de cada elemento.<\/p>\n Recuerde: no puede colocar cosas como\u00a0 elementos div<\/strong> dentro de elementos li<\/strong> (porque un div<\/strong> es un elemento a nivel de bloque) sin cambiarlo a trav\u00e9s de alg\u00fan CSS. Y queremos evitar hacer eso.<\/p>\n Entonces, en \u00faltima instancia, la interfaz de usuario puede verse as\u00ed (crudo, lo s\u00e9):<\/p>\n Si desea que cada imagen se coloque dentro del elemento de la lista, desea que tenga una cierta altura escalada y desea que est\u00e9 centrada, intente con el siguiente c\u00f3digo<\/a><\/strong> :<\/p>\n La clave de esto, realmente, es el estilo de transformaci\u00f3n. Seg\u00fan MDN<\/a><\/strong> :<\/p>\n La funci\u00f3n CSS translateY() reposiciona un elemento verticalmente en el plano 2D. Su resultado es un tipo de dato.<\/p>\n<\/blockquote>\n \u00bfTener sentido?<\/p>\n Pi\u00e9nselo de esta manera: la funci\u00f3n translateY<\/strong> tomar\u00e1 un elemento dado (identificado por su selector) y lo posicionar\u00e1 usando el valor especificado.<\/p>\n Puede usar p\u00edxeles, porcentajes o lo que sea que necesite para que esto suceda. En este caso, son porcentajes (y son negativos). Aunque estoy usando un ejemplo de mi implementaci\u00f3n, tambi\u00e9n pretende ser un consejo sobre c\u00f3mo usar la funci\u00f3n transformY<\/strong> en relaci\u00f3n con las transformaciones.<\/p>\n Si la compatibilidad del navegador es importante, lo que, en algunos casos, deber\u00eda serlo, consulte este gr\u00e1fico<\/a><\/strong>. Est\u00e1s bastante bien cubierto.<\/p>\nCentrar din\u00e1micamente un elemento en un contenedor<\/h2>\n
\n
.acme-element {\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n height: auto;\n max-height: 190px;\n}<\/code><\/pre>\n\n
Se trata de transformaciones<\/h2>\n