Eml\u00e9kszem, kezd\u0151 webfejleszt\u0151k\u00e9nt az egyik legnagyobb frusztr\u00e1ci\u00f3t a CSS okozta. Konkr\u00e9tan egy egyszer\u0171nek t\u0171n\u0151 feladat: egy doboz, egy div elhelyez\u00e9se a k\u00e9perny\u0151 k\u00f6zep\u00e9n. \u00d3r\u00e1kat, n\u00e9ha napokat t\u00f6lt\u00f6ttem azzal, hogy k\u00fcl\u00f6nb\u00f6z\u0151 CSS tulajdons\u00e1gokkal zsongl\u0151rk\u00f6dtem, \u00e9s a v\u00e9geredm\u00e9ny sosem lett t\u00f6k\u00e9letes. Vagy horizont\u00e1lisan volt j\u00f3, de vertik\u00e1lisan elcs\u00faszott, vagy ford\u00edtva. Azt\u00e1n j\u00f6ttek a k\u00fcl\u00f6nb\u00f6z\u0151 b\u00f6ng\u00e9sz\u0151k \u00e9s minden borult. A HTML div k\u00f6z\u00e9pre igaz\u00edt\u00e1s CSS-ben<\/b> egyfajta beavat\u00e1si r\u00edtusnak t\u0171nt, amin minden fejleszt\u0151nek \u00e1t kell esnie. De a helyzet az, hogy ma m\u00e1r egy\u00e1ltal\u00e1n nem kell, hogy ez egy r\u00e9m\u00e1lom legyen. S\u0151t, a modern CSS eszk\u00f6z\u00f6kkel ez a feladat szinte gyerekj\u00e1t\u00e9k. Ebben a cikkben v\u00e9gigvesz\u00fcnk mindent, a klasszikus buktat\u00f3kt\u00f3l a legmodernebb, atombiztos megold\u00e1sokig. Elfelejtheted a felesleges idegesked\u00e9st.<\/p>\nMi\u00e9rt fontos a div k\u00f6z\u00e9pre igaz\u00edt\u00e1sa \u00e9s mire figyelj\u00fcnk?<\/h2>\n
De mi\u00e9rt is ennyire k\u00f6zponti k\u00e9rd\u00e9s ez? A v\u00e1lasz egyszer\u0171bb, mint gondoln\u00e1nk: a webdesign alapvet\u0151 eleme a vizu\u00e1lis hierarchia \u00e9s a f\u00f3kusz. Amikor egy elemet k\u00f6z\u00e9pre helyez\u00fcnk \u2013 legyen az egy bejelentkez\u0151 \u0171rlap, egy figyelemfelkelt\u0151 \u00fczenet vagy a f\u0151c\u00edm \u2013 azonnal a felhaszn\u00e1l\u00f3 figyelm\u00e9nek k\u00f6z\u00e9ppontj\u00e1ba helyezz\u00fck. A k\u00f6z\u00e9pre igaz\u00edt\u00e1s egyens\u00falyt \u00e9s rendezetts\u00e9get teremt az oldalon. Egy rosszul pozicion\u00e1lt elem rendezetlennek, s\u0151t, hib\u00e1snak t\u0171nhet, ami rontja a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt. Gondolj csak egy mod\u00e1lis ablakra, ami a sarokba van cs\u00faszva. Ugye, milyen zavar\u00f3? A reszponzivit\u00e1s kor\u00e1ban pedig a HTML div k\u00f6z\u00e9pre igaz\u00edt\u00e1s CSS-ben<\/b> m\u00e9g kritikusabb\u00e1 v\u00e1lt. A megold\u00e1sunknak minden k\u00e9perny\u0151m\u00e9reten \u2013 a hatalmas monitorokt\u00f3l az apr\u00f3 telefonokig \u2013 t\u00f6k\u00e9letesen kell m\u0171k\u00f6dnie. \u00c9ppen ez\u00e9rt elengedhetetlen, hogy meg\u00e9rts\u00fck, a k\u00fcl\u00f6nb\u00f6z\u0151 technik\u00e1k hogyan viselkednek elt\u00e9r\u0151 k\u00f6rnyezetekben. A mi\u00e9rt fontos a reszponz\u00edv div k\u00f6z\u00e9pre igaz\u00edt\u00e1s<\/b> k\u00e9rd\u00e9sre a v\u00e1lasz teh\u00e1t a konzisztens \u00e9s professzion\u00e1lis felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny biztos\u00edt\u00e1sa minden eszk\u00f6z\u00f6n. A div tartalom k\u00f6z\u00e9pre igaz\u00edt\u00e1sa css seg\u00edts\u00e9g\u00e9vel<\/b> nem csup\u00e1n eszt\u00e9tikai k\u00e9rd\u00e9s, hanem a haszn\u00e1lhat\u00f3s\u00e1g alapk\u00f6ve is.<\/p>\nK\u00fcl\u00f6nb\u00f6z\u0151 CSS technik\u00e1k a div k\u00f6z\u00e9pre igaz\u00edt\u00e1s\u00e1ra<\/h2>\n
Szerencs\u00e9re a CSS arzen\u00e1lja tele van eszk\u00f6z\u00f6kkel erre a feladatra. Nincs egyetlen, mindent els\u00f6pr\u0151 “legjobb” m\u00f3dszer; a v\u00e1laszt\u00e1s mindig a konkr\u00e9t szitu\u00e1ci\u00f3t\u00f3l, a HTML strukt\u00far\u00e1t\u00f3l \u00e9s a k\u00edv\u00e1nt reszponz\u00edv viselked\u00e9st\u0151l f\u00fcgg. V\u00e9gigvessz\u00fck a leggyakoribb technik\u00e1kat, a r\u00e9gi motorosokt\u00f3l a modern sv\u00e1jci bicsk\u00e1kig. Megn\u00e9zz\u00fck, melyik mikor ide\u00e1lis, \u00e9s mikor \u00e9rdemes ink\u00e1bb m\u00e1st v\u00e1lasztani. A HTML div k\u00f6z\u00e9pre igaz\u00edt\u00e1s CSS-ben<\/b> t\u00e9mak\u00f6re szerte\u00e1gaz\u00f3, de ha meg\u00e9rtj\u00fck az egyes m\u00f3dszerek logik\u00e1j\u00e1t, b\u00e1rmilyen elrendez\u00e9si kih\u00edv\u00e1st magabiztosan meg tudunk oldani.<\/p>\nBlokkszint\u0171 elemek horizont\u00e1lis k\u00f6z\u00e9pre igaz\u00edt\u00e1sa (margin: auto)<\/h3>\n
Ez a klasszikus, a “nagy \u00f6reg”. A Itt a m\u00e1sik gyakori f\u00e9lre\u00e9rt\u00e9s forr\u00e1sa. Sokan pr\u00f3b\u00e1lj\u00e1k a Ez a m\u00f3dszer egy kicsit tr\u00fckk\u00f6sebb, de cser\u00e9be vertik\u00e1lisan \u00e9s horizont\u00e1lisan is m\u0171k\u00f6dik, \u00e9s sok\u00e1ig ez volt az egyetlen megb\u00edzhat\u00f3 m\u00f3dja a “val\u00f3di” k\u00f6z\u00e9pre igaz\u00edt\u00e1snak. A l\u00e9nyege a k\u00f6vetkez\u0151: a sz\u00fcl\u0151 elemnek adunk egy \u00c9s akkor meg\u00e9rkezt\u00fcnk a modern CSS szent gr\u00e1lj\u00e1hoz, a Flexboxhoz. Ha van egy dolog, ami forradalmas\u00edtotta az elrendez\u00e9seket \u00e9s a k\u00f6z\u00e9pre igaz\u00edt\u00e1st, az a Flexbox. Elfelejthetj\u00fck a poz\u00edci\u00f3s tr\u00fckk\u00f6ket \u00e9s a margin hackeket. A Flexbox egy eg\u00e9sz modellt ad a kez\u00fcnkbe az elemek egy dimenzi\u00f3 ment\u00e9n (sorban vagy oszlopban) t\u00f6rt\u00e9n\u0151 elrendez\u00e9s\u00e9re \u00e9s igaz\u00edt\u00e1s\u00e1ra. A haszn\u00e1lata hihetetlen\u00fcl intuit\u00edv \u00e9s er\u0151teljes. A HTML div k\u00f6z\u00e9pre igaz\u00edt\u00e1s CSS-ben<\/b> Flexbox seg\u00edts\u00e9g\u00e9vel m\u00e1r nem k\u00fczdelem, hanem \u00e9lm\u00e9ny.<\/p>\n A var\u00e1zslat a \u00c9s itt j\u00f6n a l\u00e9nyeg. A f\u0151tengely menti igaz\u00edt\u00e1st a Ha a Flexbox volt a forradalom, akkor a CSS Grid a mindent els\u00f6pr\u0151 hatalom\u00e1tv\u00e9tel a k\u00e9tdimenzi\u00f3s elrendez\u00e9sek ter\u00e9n. M\u00edg a Flexbox alapvet\u0151en egy dimenzi\u00f3ban (sorban vagy oszlopban) gondolkodik, a Grid egyszerre kezeli a sorokat \u00e9s az oszlopokat, l\u00e9trehozva egy… nos, egy r\u00e1csot. Ez a HTML div k\u00f6z\u00e9pre igaz\u00edt\u00e1s CSS-ben<\/b> cs\u00facsa, k\u00fcl\u00f6n\u00f6sen komplexebb layoutok eset\u00e9n.<\/p>\n A logika hasonl\u00f3 a Flexboxhoz. A sz\u00fcl\u0151 elemen be\u00e1ll\u00edtjuk a A Grid tal\u00e1n m\u00e9g a Flexboxn\u00e1l is egyszer\u0171bb\u00e9 teszi a t\u00f6k\u00e9letes k\u00f6z\u00e9pre igaz\u00edt\u00e1st. A Flexbox A legjobb eszk\u00f6z\u00f6k sem \u00e9rnek semmit, ha nem ismerj\u00fck a gyakori buktat\u00f3kat. A HTML div k\u00f6z\u00e9pre igaz\u00edt\u00e1s CSS-ben<\/b> sor\u00e1n rengeteg apr\u00f3 hiba cs\u00faszhat be, ami \u00f3r\u00e1kig tart\u00f3 fejvakar\u00e1sra adhat okot. N\u00e9zz\u00fcnk meg p\u00e1rat a legtipikusabbak k\u00f6z\u00fcl, hogy te m\u00e1r ne ess bel\u00e9j\u00fck.<\/p>\n Az egyik legnagyobb hiba, ha csak asztali n\u00e9zetben gondolkodunk. Ami egy nagy monitoron t\u00f6k\u00e9letesen k\u00f6z\u00e9pen van, az egy mobilon sz\u00e9tcs\u00faszhat, vagy kil\u00f3ghat a k\u00e9perny\u0151r\u0151l. A modern megold\u00e1sok, mint a Flexbox \u00e9s a Grid, alapvet\u0151en reszponz\u00edvak, de nek\u00fcnk is gondolkodnunk kell. Haszn\u00e1lj relat\u00edv m\u00e9rt\u00e9kegys\u00e9geket (%, vw, vh) a fix pixelek helyett, ahol csak lehet. A media query-k ( B\u00e1r a Flexbox \u00e9s a Grid ma m\u00e1r a b\u00f6ng\u00e9sz\u0151k t\u00f6bb mint 98%-\u00e1ban t\u00e1mogatott, egy-egy r\u00e9gebbi projekt vagy specifikus c\u00e9lk\u00f6z\u00f6ns\u00e9g miatt sz\u00fcks\u00e9g lehet a r\u00e9gebbi b\u00f6ng\u00e9sz\u0151k t\u00e1mogat\u00e1s\u00e1ra is. Ilyenkor a Can I Use… weboldal a legjobb bar\u00e1tod. Ellen\u0151rizd, hogy a v\u00e1lasztott technol\u00f3gia megfelel-e a projekt k\u00f6vetelm\u00e9nyeinek. N\u00e9ha sz\u00fcks\u00e9g lehet “fallback” megold\u00e1sokra, p\u00e9ld\u00e1ul egy abszol\u00fat poz\u00edcion\u00e1l\u00f3s tr\u00fckkre azoknak a b\u00f6ng\u00e9sz\u0151knek, amik nem ismerik a Grid-et. A legjobb m\u00f3dszer div k\u00f6z\u00e9pre igaz\u00edt\u00e1s\u00e1ra<\/b> az, amelyik a te konkr\u00e9t projekt-k\u00f6vetelm\u00e9nyeidnek \u00e9s a c\u00e9lk\u00f6z\u00f6ns\u00e9ged b\u00f6ng\u00e9sz\u0151haszn\u00e1lati szok\u00e1sainak is megfelel. Szerencs\u00e9re ma m\u00e1r ritk\u00e1n kell komoly kompromisszumokat k\u00f6tni. A HTML div k\u00f6z\u00e9pre igaz\u00edt\u00e1s CSS-ben<\/b> eset\u00e9ben a modern eszk\u00f6z\u00f6k m\u00e1r szinte mindenhol m\u0171k\u00f6dnek.<\/p>\n L\u00e1thattuk, hogy rengeteg \u00fat vezet a k\u00f6z\u00e9pre igaz\u00edtott div-hez. De melyik a legjobb? Nincs egyetlen helyes v\u00e1lasz, de adhatok egy \u00f6k\u00f6lszab\u00e1lyt, ami a legt\u00f6bb esetben m\u0171k\u00f6dik. Ha csak egyetlen blokk elemet szeretn\u00e9l horizont\u00e1lisan k\u00f6z\u00e9pre igaz\u00edtani, \u00e9s nem b\u00e1nod, hogy fix sz\u00e9less\u00e9get adsz neki, a j\u00f3 \u00f6reg Eml\u00e9kszem, kezd\u0151 webfejleszt\u0151k\u00e9nt az egyik legnagyobb frusztr\u00e1ci\u00f3t a CSS okozta. Konkr\u00e9tan egy egyszer\u0171nek t\u0171n\u0151 feladat: egy doboz, egy div elhelyez\u00e9se a k\u00e9perny\u0151 k\u00f6zep\u00e9n. \u00d3r\u00e1kat, n\u00e9ha napokat t\u00f6lt\u00f6ttem azzal, hogy k\u00fcl\u00f6nb\u00f6z\u0151 CSS tulajdons\u00e1gokkal zsongl\u0151rk\u00f6dtem, \u00e9s a v\u00e9geredm\u00e9ny sosem lett t\u00f6k\u00e9letes. Vagy horizont\u00e1lisan volt j\u00f3, de vertik\u00e1lisan elcs\u00faszott, vagy ford\u00edtva. Azt\u00e1n j\u00f6ttek a k\u00fcl\u00f6nb\u00f6z\u0151 b\u00f6ng\u00e9sz\u0151k \u00e9s minden […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-369","post","type-post","status-publish","format-standard","hentry","category-technologia"],"_links":{"self":[{"href":"https:\/\/worldpoint.eu\/hu\/wp-json\/wp\/v2\/posts\/369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/worldpoint.eu\/hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/worldpoint.eu\/hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/worldpoint.eu\/hu\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/worldpoint.eu\/hu\/wp-json\/wp\/v2\/comments?post=369"}],"version-history":[{"count":0,"href":"https:\/\/worldpoint.eu\/hu\/wp-json\/wp\/v2\/posts\/369\/revisions"}],"wp:attachment":[{"href":"https:\/\/worldpoint.eu\/hu\/wp-json\/wp\/v2\/media?parent=369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/worldpoint.eu\/hu\/wp-json\/wp\/v2\/categories?post=369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/worldpoint.eu\/hu\/wp-json\/wp\/v2\/tags?post=369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}margin: 0 auto;<\/code> a legels\u0151 tr\u00fckk, amit a legt\u00f6bben megtanulunk, amikor a horizont\u00e1lis k\u00f6z\u00e9pre igaz\u00edt\u00e1sr\u00f3l van sz\u00f3. A tr\u00fckk zseni\u00e1lisan egyszer\u0171: ha egy blokkszint\u0171 elemnek (mint a <div><\/code>) megadunk egy konkr\u00e9t sz\u00e9less\u00e9get (width<\/code>), a margin: auto<\/code> egyenl\u0151en osztja el a marad\u00e9k horizont\u00e1lis helyet az elem bal \u00e9s jobb oldala k\u00f6z\u00f6tt. Voil\u00e1, k\u00f6z\u00e9pen van. De itt j\u00f6n a csapda, ami miatt annyi kezd\u0151nek f\u00e1j a feje. Mi a k\u00e9t legfontosabb felt\u00e9tel? Az elemnek block<\/code> szint\u0171nek kell lennie, \u00e9s rendelkeznie kell egy explicit width<\/code> \u00e9rt\u00e9kkel. Ha a sz\u00e9less\u00e9g 100% vagy nincs megadva, nincs “marad\u00e9k” hely, amit el lehetne osztani, \u00edgy a marg\u00f3 sem tudja k\u00f6z\u00e9pre tolni. Eml\u00e9kszem, h\u00e1nyszor \u00fcltem a g\u00e9p el\u0151tt, \u00e9s nem \u00e9rtettem, a margin auto nem m\u0171k\u00f6dik div k\u00f6z\u00e9pre igaz\u00edt\u00e1sn\u00e1l<\/b>, pedig mindent “j\u00f3l” csin\u00e1ltam. Azt\u00e1n persze kider\u00fclt, hogy a width<\/code> lemaradt. A CSS k\u00f6z\u00e9pre igaz\u00edt\u00e1s fix sz\u00e9less\u00e9g\u0171 div-n\u00e9l<\/b> ezzel a m\u00f3dszerrel a legegyszer\u0171bb. Viszont fontos tudni: ez a technika kiz\u00e1r\u00f3lag horizont\u00e1lis igaz\u00edt\u00e1sra j\u00f3, a vertik\u00e1lisra semmilyen hat\u00e1ssal nincs. A HTML div k\u00f6z\u00e9pre igaz\u00edt\u00e1s CSS-ben<\/b> ezzel a m\u00f3dszerrel a legr\u00e9gebbi, de m\u00e9g mindig hasznos eszk\u00f6z.<\/p>\nInline \u00e9s inline-block elemek k\u00f6z\u00e9pre igaz\u00edt\u00e1sa (text-align: center)<\/h3>\n
text-align: center;<\/code> tulajdons\u00e1got mag\u00e1ra a div-re alkalmazni, hogy azt k\u00f6z\u00e9pre igaz\u00edts\u00e1k, majd csod\u00e1lkoznak, hogy nem t\u00f6rt\u00e9nik semmi. A helyzet az, hogy a text-align<\/code> nem a blokkszint\u0171 elemet mag\u00e1t igaz\u00edtja, hanem a benne l\u00e9v\u0151 tartalmat<\/em>. Teh\u00e1t ha van egy div-\u00fcnk, \u00e9s azt szeretn\u00e9nk, hogy a benne l\u00e9v\u0151 sz\u00f6veg, k\u00e9pek, vagy b\u00e1rmilyen inline<\/code> vagy inline-block<\/code> elem k\u00f6z\u00e9pre ker\u00fclj\u00f6n, akkor a sz\u00fcl\u0151 div-re kell ezt a tulajdons\u00e1got alkalmazni. Igen, j\u00f3l olvastad, a sz\u00fcl\u0151re. Ez a t\u00f6k\u00e9letes megold\u00e1s, ha a div belsej\u00e9ben l\u00e9v\u0151 sz\u00f6veg k\u00f6z\u00e9pre igaz\u00edt\u00e1sa<\/b> a c\u00e9l. A probl\u00e9ma akkor kezd\u0151dik, amikor a text-align center nem m\u0171k\u00f6dik div-n\u00e9l<\/b>, mert mag\u00e1t a div-et pr\u00f3b\u00e1ljuk vele mozgatni. Ez sosem fog m\u0171k\u00f6dni. Ez a m\u00f3dszer teh\u00e1t a dobozon bel\u00fcli tartalomra vonatkozik. A k\u00e9p k\u00f6z\u00e9pre igaz\u00edt\u00e1sa div elemen bel\u00fcl css-sel<\/b> is k\u00f6nnyed\u00e9n megoldhat\u00f3 \u00edgy, ha a k\u00e9p inline-block<\/code>-k\u00e9nt viselkedik. A HTML div k\u00f6z\u00e9pre igaz\u00edt\u00e1s CSS-ben<\/b> ezen form\u00e1ja a bels\u0151 tartalomra f\u00f3kusz\u00e1l.<\/p>\nAbszol\u00fat poz\u00edcion\u00e1l\u00e1s \u00e9s transzform\u00e1ci\u00f3<\/h3>\n
position: relative;<\/code> tulajdons\u00e1got (ez lesz a viszony\u00edt\u00e1si pont), a k\u00f6z\u00e9pre igaz\u00edtand\u00f3 gyerek elemnek pedig position: absolute;<\/code>-ot. Ezzel kiszak\u00edtjuk a norm\u00e1l dokumentumfolyamb\u00f3l. Ezut\u00e1n be\u00e1ll\u00edtjuk, hogy a teteje \u00e9s a bal oldala is a sz\u00fcl\u0151 50%-\u00e1n\u00e1l kezd\u0151dj\u00f6n (top: 50%; left: 50%;<\/code>). Itt j\u00f6n a csavar: ez nem az elem k\u00f6zep\u00e9t, hanem a bal fels\u0151 sark\u00e1t igaz\u00edtja a sz\u00fcl\u0151 k\u00f6zep\u00e9re. Hogy ezt korrig\u00e1ljuk, a transform: translate(-50%, -50%);<\/code> tulajdons\u00e1got haszn\u00e1ljuk, ami az elem saj\u00e1t m\u00e9ret\u00e9hez k\u00e9pest tolja vissza 50-50%-kal balra \u00e9s felfel\u00e9. Zseni\u00e1lis, nem? A div k\u00f6z\u00e9pre igaz\u00edt\u00e1sa abszol\u00fat poz\u00edcion\u00e1l\u00e1ssal<\/b> rendk\u00edv\u00fcl hat\u00e9kony, k\u00fcl\u00f6n\u00f6sen felugr\u00f3 ablakokn\u00e1l vagy overlay elemekn\u00e9l. A CSS pozicion\u00e1l\u00e1s div k\u00f6z\u00e9pre igaz\u00edt\u00e1sa<\/b> ezzel a transzform\u00e1ci\u00f3s tr\u00fckkel v\u00e1lt igaz\u00e1n er\u0151ss\u00e9, miel\u0151tt a Flexbox megjelent volna. Ez a HTML div k\u00f6z\u00e9pre igaz\u00edt\u00e1s CSS-ben<\/b> technika m\u00e1r halad\u00f3bb szintet k\u00e9pvisel, de meg\u00e9ri megtanulni. <\/p>\nFlexbox ereje a k\u00f6z\u00e9pre igaz\u00edt\u00e1sban<\/h3>\n
Flexbox alapok \u00e9s be\u00e1ll\u00edt\u00e1sok<\/h4>\n
display: flex;<\/code> paranccsal kezd\u0151dik, amit a sz\u00fcl\u0151 elemen, a “flex kont\u00e9neren” kell alkalmazni. Ett\u0151l a pillanatt\u00f3l kezdve a k\u00f6zvetlen gyerek elemei “flex item”-ekk\u00e9 v\u00e1lnak, \u00e9s egy sorba rendez\u0151dnek. A k\u00e9t legfontosabb fogalom a f\u0151tengely (main axis) \u00e9s a kereszttengely (cross axis). Alap\u00e9rtelmezetten a f\u0151tengely horizont\u00e1lis (sor), a kereszttengely pedig vertik\u00e1lis. Ezt a flex-direction<\/code> tulajdons\u00e1ggal v\u00e1ltoztathatjuk meg, p\u00e9ld\u00e1ul flex-direction: column;<\/code>-ra, amivel a f\u0151tengely vertik\u00e1lis lesz. A flex-direction column div k\u00f6z\u00e9pre igaz\u00edt\u00e1sa<\/b> \u00e9ppen ez\u00e9rt ugyanolyan egyszer\u0171, mint a sorba rendezett\u00e9. A HTML div k\u00f6z\u00e9pre igaz\u00edt\u00e1s CSS-ben<\/b> Flexbox-szal egy \u00faj dimenzi\u00f3t nyitott a fejleszt\u0151k el\u0151tt.<\/p>\nHorizont\u00e1lis \u00e9s vertik\u00e1lis k\u00f6z\u00e9pre igaz\u00edt\u00e1s Flexbox-szal<\/h4>\n
justify-content<\/code> tulajdons\u00e1g v\u00e9gzi. Ha k\u00f6z\u00e9pre akarunk igaz\u00edtani, egyszer\u0171en azt mondjuk: justify-content: center;<\/code>. A kereszttengely menti igaz\u00edt\u00e1s\u00e9rt az align-items<\/code> a felel\u0151s. Itt is csak annyi a dolgunk: align-items: center;<\/code>. Ha mindkett\u0151t be\u00e1ll\u00edtjuk a flex kont\u00e9neren, a benne l\u00e9v\u0151 elemek t\u00f6k\u00e9letesen, pixelpontosan a kont\u00e9ner k\u00f6zep\u00e9re ker\u00fclnek. Nincs tr\u00fckk, nincs mell\u00e9besz\u00e9l\u00e9s. K\u00e9t sor CSS, \u00e9s k\u00e9sz. Ez a horizont\u00e1lis \u00e9s vertik\u00e1lis div k\u00f6z\u00e9pre igaz\u00edt\u00e1s<\/b> legtiszt\u00e1bb form\u00e1ja. A flexbox div k\u00f6z\u00e9pre igaz\u00edt\u00e1sa reszponz\u00edvan<\/b> pedig gyerekj\u00e1t\u00e9k, hiszen a Flexbox term\u00e9szet\u00e9b\u0151l ad\u00f3d\u00f3an rugalmas. A modern HTML div k\u00f6z\u00e9pre igaz\u00edt\u00e1s CSS-ben<\/b> szinte elk\u00e9pzelhetetlen n\u00e9lk\u00fcle. Annyira egyszer\u0171, hogy szinte s\u00edrni tudn\u00e9k a r\u00e9gi id\u0151kben elpazarolt \u00f3r\u00e1k miatt.<\/p>\nGrid Layout: prec\u00edz k\u00f6z\u00e9pre igaz\u00edt\u00e1s<\/h3>\n
CSS Grid alapok a k\u00f6z\u00e9pre igaz\u00edt\u00e1shoz<\/h4>\n
display: grid;<\/code> tulajdons\u00e1got. Ezzel a kont\u00e9ner egy grid kont\u00e9nerr\u00e9 v\u00e1lik, a gyerek elemek pedig grid item-ek lesznek. A k\u00fcl\u00f6nbs\u00e9g flexbox \u00e9s grid div igaz\u00edt\u00e1s k\u00f6z\u00f6tt<\/b> legink\u00e1bb a dimenzi\u00f3kban rejlik: a Grid a k\u00e9tdimenzi\u00f3s t\u00e9r ura, m\u00edg a Flexbox az egydimenzi\u00f3s elrendez\u00e9sek bajnoka. A k\u00f6z\u00e9pre igaz\u00edt\u00e1s szempontj\u00e1b\u00f3l azonban mindkett\u0151 rendk\u00edv\u00fcl er\u0151s.<\/p>\nElemek k\u00f6z\u00e9pre igaz\u00edt\u00e1sa Grid-del<\/h4>\n
justify-content<\/code> \u00e9s align-items<\/code> p\u00e1ros\u00e1nak itt a justify-items<\/code> \u00e9s align-items<\/code> felel meg, amelyek a cell\u00e1n bel\u00fcli igaz\u00edt\u00e1st vez\u00e9rlik. De van egy m\u00e9g egyszer\u0171bb \u00fat is! A place-items: center;<\/code> egy r\u00f6vid\u00edtett tulajdons\u00e1g, ami egyszerre \u00e1ll\u00edtja az align-items<\/code> \u00e9s justify-items<\/code> \u00e9rt\u00e9k\u00e9t center<\/code>-re. Egyetlen sor CSS, \u00e9s a grid cell\u00e1n bel\u00fcl minden t\u00f6k\u00e9letesen k\u00f6z\u00e9pre ker\u00fcl. Ez a legeleg\u00e1nsabb m\u00f3dja annak, hogy egy elemet egy m\u00e1sik k\u00f6zep\u00e9re helyezz\u00fcnk. A div elhelyez\u00e9se k\u00e9perny\u0151 k\u00f6zep\u00e9n css-sel<\/b> sosem volt m\u00e9g ilyen tiszta. A CSS grid div elem k\u00f6z\u00e9pre igaz\u00edt\u00e1sa<\/b> a modern webfejleszt\u00e9s egyik leghat\u00e9konyabb eszk\u00f6ze, \u00e9s a HTML div k\u00f6z\u00e9pre igaz\u00edt\u00e1s CSS-ben<\/b> t\u00e9mak\u00f6r\u00e9nek megker\u00fclhetetlen r\u00e9sze.<\/p>\nGyakori hib\u00e1k \u00e9s tippek a div k\u00f6z\u00e9pre igaz\u00edt\u00e1s\u00e1hoz<\/h2>\n
Reszponz\u00edv megold\u00e1sok mobil n\u00e9zetre<\/h3>\n
@media<\/code>) seg\u00edts\u00e9g\u00e9vel pedig specifikus szab\u00e1lyokat hozhatsz l\u00e9tre a k\u00fcl\u00f6nb\u00f6z\u0151 k\u00e9perny\u0151m\u00e9retekre. P\u00e9ld\u00e1ul mobilon a div k\u00f6z\u00e9pre igaz\u00edt\u00e1s mobil n\u00e9zetben<\/b> lehet, hogy m\u00e1s flexbox be\u00e1ll\u00edt\u00e1sokat ig\u00e9nyel (pl. flex-direction: column<\/code>). A div igaz\u00edt\u00e1sa viewport m\u00e9ret\u00e9hez k\u00e9pest<\/b> (a b\u00f6ng\u00e9sz\u0151ablak l\u00e1that\u00f3 ter\u00fclet\u00e9hez) a vw<\/code> \u00e9s vh<\/code> egys\u00e9gekkel rendk\u00edv\u00fcl hat\u00e9kony tud lenni. A hogyan igaz\u00edtsunk div elemet k\u00f6z\u00e9pre css-ben<\/b> k\u00e9rd\u00e9sre a v\u00e1lasz mindig tartalmazza a “minden k\u00e9perny\u0151n” kit\u00e9telt.<\/p>\nKompatibilit\u00e1s \u00e9s b\u00f6ng\u00e9sz\u0151 t\u00e1mogat\u00e1s<\/h3>\n
Melyik m\u00f3dszert v\u00e1lasszuk? \u00d6sszefoglal\u00f3 \u00e9s aj\u00e1nl\u00e1sok<\/h2>\n
margin: auto<\/code> t\u00f6k\u00e9letes \u00e9s egyszer\u0171. Ha egy sorban vagy oszlopban t\u00f6bb elemet kell elrendezned \u00e9s igaz\u00edtanod (pl. egy men\u00fcsor), a Flexbox a te eszk\u00f6z\u00f6d. A t\u00f6bb div elem k\u00f6z\u00e9pre igaz\u00edt\u00e1sa egym\u00e1s mellett<\/b> a Flexbox j\u00e1tsz\u00f3tere. Amikor pedig bonyolult, k\u00e9tdimenzi\u00f3s r\u00e1csban, sorokban \u00e9s oszlopokban egyszerre kell gondolkodnod (pl. egy teljes oldal-layout), a CSS Grid verhetetlen. A html div vertik\u00e1lis k\u00f6z\u00e9pre igaz\u00edt\u00e1sa css-ben<\/b> a Flexbox \u00e9s a Grid seg\u00edts\u00e9g\u00e9vel m\u00e1r nem okozhat gondot. Az abszol\u00fat poz\u00edcion\u00e1l\u00f3s m\u00f3dszert tartogasd a speci\u00e1lis esetekre, mint a felugr\u00f3 ablakok. A div auto margin center css<\/b> tov\u00e1bbra is \u00e9l, de csak a legegyszer\u0171bb esetekben. A modern webfejleszt\u00e9sben a Flexbox \u00e9s a Grid a nyer\u0151 p\u00e1ros, amelyekkel a HTML div k\u00f6z\u00e9pre igaz\u00edt\u00e1s CSS-ben<\/b> minden elk\u00e9pzelhet\u0151 form\u00e1j\u00e1t magabiztosan megval\u00f3s\u00edthatod. Felejtsd el a r\u00e9gi hackeket, \u00e9s haszn\u00e1ld b\u00e1tran a modern CSS erej\u00e9t!<\/p>\n","protected":false},"excerpt":{"rendered":"