Quand il s’agit d’\u00e9crire sur le d\u00e9veloppement, je ne parle pas souvent de choses autres que PHP et JavaScript, principalement parce que je travaille avec ces langages plus que d’autres.<\/p>\n
Je veux dire, oui, le CSS fait partie de l’accord, tout comme le HTML, mais c’est ce qu’on attend de nos jours, n’est-ce pas\u00a0?<\/p>\n
Donc, s’il y avait un petit conseil \u00e0 donner \u00e0 propos de CSS, c’est bien celui-ci (bien que je devrais peut-\u00eatre en \u00e9crire plus\u00a0?). C’est difficile quand Chris<\/a><\/strong> fait un travail aussi g\u00e9nial en ex\u00e9cutant CSS Tricks<\/a><\/strong>, mais je m’\u00e9loigne du sujet.<\/p>\n Quoi qu’il en soit, voici le probl\u00e8me et la solution.<\/p>\n L’id\u00e9e de centrer dynamiquement un \u00e9l\u00e9ment est bas\u00e9e sur le sc\u00e9nario suivant\u00a0:<\/p>\n C’est peut-\u00eatre encore un peu g\u00e9n\u00e9ral. Si c’est le cas, supposons que vous ayez une liste (ordonn\u00e9e ou non, peu importe). Ils ont une hauteur et une largeur fixes, et vous allez placer les images, mises \u00e0 l’\u00e9chelle, dans chaque \u00e9l\u00e9ment.<\/p>\n N’oubliez pas\u00a0: vous ne pouvez pas placer des \u00e9l\u00e9ments tels que des \u00e9l\u00e9ments div dans des \u00e9l\u00e9ments<\/strong> li<\/strong> (car un\u00a0 \u00e9l\u00e9ment div<\/strong> est un \u00e9l\u00e9ment de niveau bloc) sans le modifier via du CSS. Et nous voulons \u00e9viter de le faire.<\/p>\n Donc, en fin de compte, l’interface utilisateur peut ressembler \u00e0 ceci (brut, je sais):<\/p>\n Si vous souhaitez que chaque image soit plac\u00e9e dans l’\u00e9l\u00e9ment de liste, que vous souhaitiez qu’elle ait une certaine hauteur d’\u00e9chelle et que vous souhaitiez qu’elle soit centr\u00e9e, essayez le code suivant<\/a><\/strong>\u00a0:<\/p>\n La cl\u00e9 de cela, vraiment, est le style de transformation. Selon MDN<\/a><\/strong> :<\/p>\n La fonction CSS translateY() repositionne un \u00e9l\u00e9ment verticalement sur le plan 2D. Son r\u00e9sultat est un type de donn\u00e9es.<\/p>\n<\/blockquote>\n Avoir du sens\u00a0?<\/p>\n Pensez-y de cette fa\u00e7on\u00a0: la fonction translateY<\/strong> prendra un \u00e9l\u00e9ment donn\u00e9 (identifi\u00e9 par son s\u00e9lecteur) et le positionnera en utilisant la valeur sp\u00e9cifi\u00e9e.<\/p>\n Vous pouvez utiliser des pixels, des pourcentages ou tout ce dont vous avez besoin pour y arriver. Dans ce cas, ce sont des pourcentages (et ils sont n\u00e9gatifs). Bien que j’utilise un exemple de mon impl\u00e9mentation, il s’agit \u00e9galement d’un conseil sur la fa\u00e7on d’utiliser la fonction transformY<\/strong> en relation avec les transformations.<\/p>\n Si la compatibilit\u00e9 du navigateur est importante – ce qui, dans certains cas, devrait \u00eatre le cas – consultez ce tableau<\/a><\/strong>. Vous \u00eates plut\u00f4t bien couvert.<\/p>\nCentrer dynamiquement un \u00e9l\u00e9ment dans un conteneur<\/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
Il s’agit de transformations<\/h2>\n