Quando se trata de escrever sobre desenvolvimento, n\u00e3o costumo falar sobre coisas al\u00e9m de PHP e JavaScript, principalmente porque trabalho mais com essas linguagens do que com outras.<\/p>\n
Quero dizer, sim, CSS \u00e9 parte do neg\u00f3cio, assim como HTML, mas \u00e9 esperado hoje em dia, certo?<\/p>\n
Ent\u00e3o, se alguma vez houve uma dica r\u00e1pida para eu oferecer sobre CSS, \u00e9 isso (embora talvez eu deva escrever mais?). \u00c9 dif\u00edcil quando Chris<\/a><\/strong> faz um trabalho t\u00e3o incr\u00edvel executando CSS Tricks<\/a><\/strong>, mas eu discordo.<\/p>\n Enfim, aqui est\u00e1 o problema e a solu\u00e7\u00e3o.<\/p>\n A ideia de centralizar dinamicamente um elemento \u00e9 baseada no seguinte cen\u00e1rio:<\/p>\n Talvez isso ainda seja um pouco geral. Nesse caso, vamos supor que voc\u00ea tenha uma lista (ordenada ou n\u00e3o ordenada, n\u00e3o importa). Eles t\u00eam uma altura e largura fixas, e voc\u00ea colocar\u00e1 as imagens, em escala, dentro de cada elemento.<\/p>\n Lembre-se: voc\u00ea n\u00e3o pode colocar coisas como\u00a0 elementos div<\/strong> dentro de elementos li<\/strong> (porque um div<\/strong> \u00e9 um elemento de n\u00edvel de bloco) sem alter\u00e1-lo por meio de algum CSS. E queremos evitar isso.<\/p>\n Ent\u00e3o, em \u00faltima an\u00e1lise, a interface do usu\u00e1rio pode ser algo assim (bruto, eu sei):<\/p>\n Se voc\u00ea quiser que cada imagem seja colocada dentro do item da lista, voc\u00ea quer que ela tenha uma certa altura dimensionada e voc\u00ea quer que ela seja centralizada, tente o seguinte trecho de c\u00f3digo<\/a><\/strong> :<\/p>\n A chave para isso, realmente, \u00e9 o estilo de transforma\u00e7\u00e3o. De acordo com o MDN<\/a><\/strong> :<\/p>\n A fun\u00e7\u00e3o CSS translateY() reposiciona um elemento verticalmente no plano 2D. Seu resultado \u00e9 um tipo de dados.<\/p>\n<\/blockquote>\n Faz sentido?<\/p>\n Pense desta forma: A fun\u00e7\u00e3o translateY<\/strong> pegar\u00e1 um determinado elemento (identificado por seu seletor) e o posicionar\u00e1 usando o valor especificado.<\/p>\n Voc\u00ea pode usar pixels, porcentagens ou o que for necess\u00e1rio para fazer isso acontecer. Neste caso, s\u00e3o porcentagens (e s\u00e3o negativas). Embora eu esteja usando um exemplo da minha implementa\u00e7\u00e3o, tamb\u00e9m \u00e9 uma dica sobre como usar a fun\u00e7\u00e3o transformY<\/strong> em rela\u00e7\u00e3o \u00e0s transforma\u00e7\u00f5es.<\/p>\n Se a compatibilidade do navegador for importante \u2013 o que, em alguns casos, deveria \u2013 confira este gr\u00e1fico<\/a><\/strong>. Voc\u00ea est\u00e1 muito bem coberto.<\/p>\nCentralizando dinamicamente um elemento em um cont\u00eainer<\/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
\u00c9 Sobre Transforma\u00e7\u00f5es<\/h2>\n