Je\u015bli chodzi o pisanie o programowaniu, rzadko m\u00f3wi\u0119 o rzeczach poza PHP i JavaScript, g\u0142\u00f3wnie dlatego, \u017ce pracuj\u0119 z tymi j\u0119zykami cz\u0119\u015bciej ni\u017c z innymi.<\/p>\n
Mam na my\u015bli, \u017ce tak, CSS jest cz\u0119\u015bci\u0105 umowy, podobnie jak HTML, ale w dzisiejszych czasach oczekuje si\u0119 tego, prawda?<\/p>\n
Wi\u0119c je\u015bli kiedykolwiek pojawi\u0142a si\u0119 dla mnie szybka wskaz\u00f3wka dotycz\u0105ca CSS, to jest to (cho\u0107 mo\u017ce powinienem napisa\u0107 wi\u0119cej?). Ci\u0119\u017cko jest, gdy Chris<\/a><\/strong> wykonuje tak\u0105 niesamowit\u0105 robot\u0119 przy uruchamianiu sztuczek CSS<\/a><\/strong>, ale ja robi\u0119 dygresj\u0119.<\/p>\n W ka\u017cdym razie oto problem i rozwi\u0105zanie.<\/p>\n Idea dynamicznego centrowania elementu opiera si\u0119 na nast\u0119puj\u0105cym scenariuszu:<\/p>\n By\u0107 mo\u017ce jest to jeszcze troch\u0119 og\u00f3lne. Je\u015bli tak, za\u0142\u00f3\u017cmy, \u017ce masz list\u0119 (uporz\u0105dkowan\u0105 lub nieuporz\u0105dkowan\u0105, nie ma to znaczenia). Maj\u0105 ustalon\u0105 wysoko\u015b\u0107 i szeroko\u015b\u0107, a obrazy b\u0119d\u0105 skalowane w ka\u017cdym elemencie.<\/p>\n Pami\u0119taj: nie mo\u017cesz umieszcza\u0107 element\u00f3w takich jak elementy div w elementach<\/strong> li<\/strong> (poniewa\u017c div<\/strong> jest elementem na poziomie bloku) bez zmiany go za pomoc\u0105 jakiego\u015b CSS. I chcemy tego unikn\u0105\u0107.<\/p>\n Wi\u0119c ostatecznie interfejs u\u017cytkownika mo\u017ce wygl\u0105da\u0107 mniej wi\u0119cej tak (nieproszony, wiem):<\/p>\n Je\u015bli chcesz, aby ka\u017cdy obraz zosta\u0142 umieszczony w elemencie listy, chcesz, aby mia\u0142 okre\u015blon\u0105 wysoko\u015b\u0107 w skali i chcesz, aby by\u0142 wy\u015brodkowany, wypr\u00f3buj nast\u0119puj\u0105cy fragment kodu<\/a><\/strong> :<\/p>\n Kluczem do tego jest styl transformacji. Wed\u0142ug MDN<\/a><\/strong> :<\/p>\n Funkcja CSS translateY() zmienia po\u0142o\u017cenie elementu w pionie na p\u0142aszczy\u017anie 2D. Jego wynikiem jest typ danych.<\/p>\n<\/blockquote>\n Ma sens?<\/p>\n Pomy\u015bl o tym w ten spos\u00f3b: funkcja translateY<\/strong> pobierze dany element (zidentyfikowany przez jego selektor) i ustawi go przy u\u017cyciu okre\u015blonej warto\u015bci.<\/p>\n Mo\u017cesz u\u017cy\u0107 pikseli, warto\u015bci procentowych lub czegokolwiek, czego potrzebujesz, aby to si\u0119 sta\u0142o. W tym przypadku s\u0105 to warto\u015bci procentowe (i s\u0105 ujemne). Chocia\u017c u\u017cywam przyk\u0142adu mojej implementacji, ma on r\u00f3wnie\u017c stanowi\u0107 wskaz\u00f3wk\u0119, jak u\u017cywa\u0107 funkcji transformY<\/strong> w odniesieniu do przekszta\u0142ce\u0144.<\/p>\n Je\u015bli kompatybilno\u015b\u0107 przegl\u0105darki ma znaczenie \u2013 co w niekt\u00f3rych przypadkach powinna \u2013 sprawd\u017a ten wykres<\/a><\/strong>. Jeste\u015b ca\u0142kiem dobrze zabezpieczony.<\/p>\nDynamiczne centrowanie elementu w kontenerze<\/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
Chodzi o transformacje<\/h2>\n