N\u00e4r det kommer till att skriva om utveckling pratar jag inte ofta om saker ut\u00f6ver PHP och JavaScript fr\u00e4mst f\u00f6r att jag jobbar med de spr\u00e5ken mer \u00e4n andra.<\/p>\n
Jag menar, ja, CSS \u00e4r en del av aff\u00e4ren liksom HTML, men det f\u00f6rv\u00e4ntas i dessa dagar, eller hur?<\/p>\n
S\u00e5 om det n\u00e5gon g\u00e5ng fanns ett snabbt tips f\u00f6r mig att ge ang\u00e5ende CSS s\u00e5 \u00e4r det det h\u00e4r (\u00e4ven om jag kanske borde skriva mer?). Det \u00e4r sv\u00e5rt n\u00e4r Chris<\/a><\/strong> g\u00f6r ett s\u00e5 fantastiskt jobb med att k\u00f6ra CSS Tricks<\/a><\/strong>, men jag avviker.<\/p>\n Hur som helst, h\u00e4r \u00e4r problemet och l\u00f6sningen.<\/p>\n Id\u00e9n med att dynamiskt centrera ett element \u00e4r baserad p\u00e5 f\u00f6ljande scenario:<\/p>\n Kanske \u00e4r detta fortfarande lite allm\u00e4nt. Om s\u00e5 \u00e4r fallet, l\u00e5t oss anta att du har en lista (ordnad eller oordnad, det spelar ingen roll). De har en fast h\u00f6jd och bredd, och du kommer att placera bilderna, skalade, inom varje element.<\/p>\n Kom ih\u00e5g: du kan inte placera saker som div<\/strong> – element inom li<\/strong> – element (eftersom en div<\/strong> \u00e4r ett element p\u00e5 blockniv\u00e5) utan att \u00e4ndra det via n\u00e5gon CSS. Och det vill vi undvika att g\u00f6ra.<\/p>\n S\u00e5 i slut\u00e4ndan kan anv\u00e4ndargr\u00e4nssnittet se ut ungef\u00e4r s\u00e5 h\u00e4r (r\u00e5, jag vet):<\/p>\n Om du vill att varje bild ska placeras i listobjektet, du vill att den ska ha en viss skalad h\u00f6jd, och du vill att den ska centreras, prova f\u00f6ljande kodbit<\/a><\/strong> :<\/p>\n Nyckeln till detta \u00e4r egentligen transformationsstilen. Enligt MDN<\/a><\/strong> :<\/p>\n CSS-funktionen translateY() placerar om ett element vertikalt p\u00e5 2D-planet. Resultatet \u00e4r en datatyp.<\/p>\n<\/blockquote>\n Vettigt?<\/p>\n T\u00e4nk p\u00e5 det s\u00e5 h\u00e4r: TranslateY<\/strong> -funktionen tar ett givet element (identifieras av dess v\u00e4ljare) och placerar det med det angivna v\u00e4rdet.<\/p>\n Du kan anv\u00e4nda pixlar, procentsatser eller vad det nu \u00e4r du beh\u00f6ver f\u00f6r att f\u00e5 det att h\u00e4nda. I det h\u00e4r fallet \u00e4r det procentsatser (och de \u00e4r negativa). \u00c4ven om jag anv\u00e4nder ett exempel p\u00e5 min implementering, \u00e4r det ocks\u00e5 t\u00e4nkt att vara ett tips om hur man anv\u00e4nder transformY<\/strong> – \u00a0funktionen med relation till transformer.<\/p>\n Om webbl\u00e4sarkompatibilitet spelar roll \u2013 vilket det i vissa fall borde \u2013 kolla in det h\u00e4r diagrammet<\/a><\/strong>. Du \u00e4r ganska v\u00e4l t\u00e4ckt.<\/p>\nDynamiskt centrera ett element i en beh\u00e5llare<\/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
Det handlar om f\u00f6rvandlingar<\/h2>\n