Eddig csak az elemeket igazítottuk balra. Pontosabban, ezt egyáltalán nem csináltuk, és a böngésző maga alapértelmezés szerint balra igazítja az elemeket. Persze túl unalmas lenne mindent balra igazítani. Ezért vannak különböző módokon középre és jobbra igazítás.
Az elemek igazítását csak tudnia kell, mikor . Az első dolog, hogy beírja a legegyszerűbb oldalt.
Volt egyszer egy cédula
Képet középre helyezve is felvehet, ugorjunk is a következő sorba a címkével
:
1. szintű fejléc középen
Ez egy címke volt
A probléma megoldására a fejlesztők egy univerzális módszert találtak ki az elemek igazítására. HTML. A módszer az úgynevezett konténerek használata, amelyek a címkével jönnek létre Most írjuk le ugyanezt HTML kód, de konténerek használatával ráadásul ne középre igazodjunk, hanem jobbra. Mint látható, minden működik. Azt tanácsolom, hogy változtassa meg a " attribútum értékét is igazítsa", hogy más típusú tárolótartalom-igazításokat nézzen meg. Egy másik módja az elemek igazításának HTML- ezek táblázatok, de ez a téma külön tárgyalást érdemel, ezért a következő cikkek egyikében szólunk róla. Egyelőre így kell kinéznie az oldalának: Üdvözlettel: Mihail Rusakov. P.S. Ha többet szeretne tudni róla HTML akkor nézz az enyémre ingyenes tanfolyam webhely létrehozásának példájával HTML: Ha levág egy webhelyet, amelyen létrehozott html alapú, akkor egy bizonyos réteges szerkezetet fog látni. És övék megjelenés réteges tortához lesz hasonló. Ha így gondolja, akkor valószínűleg már régóta nem evett. Tehát először csillapítsa éhségét, majd megmutatjuk, hogyan helyezze középre a div réteget a webhelyen: A telekszerkezet-építésnek két fő típusa van: A táblázatos elrendezés az internet kezdete óta domináns. Előnyei közé tartozik az adott pozicionálás pontossága. Ennek ellenére vannak nyilvánvaló hiányosságai. A főbbek a kód hangereje és alacsony sebesség letöltések. Táblázatos elrendezés használata esetén a weboldal nem jelenik meg, amíg teljesen be nem töltődik. Míg div blokkok használatakor az elemek azonnal megjelennek. Kivéve Magassebesség letöltés blokk építése az oldalon lehetővé teszi többször is, hogy csökkentsék a hangerőt html kódot. Többek között a CSS-osztályok használatával. Az oldalon megjelenő adatok strukturálásához azonban táblázatos elrendezést kell használni. Használatának klasszikus példája a táblázatok megjelenítése. Blokképítés címkék alapján Blokk-elrendezésben a rétegpozícionálást legjobban lépcsőzetes stíluslapok segítségével lehet elvégezni. A pozícióért felelős fő CSS-tulajdonság Tekintsünk egy könnyű példát a div pozicionálására ezzel a tulajdonsággal:
A következő példában egy konténerréteget fogunk használni a többi elem elhelyezésére. Ez megoldja a blokkok egymáshoz viszonyított eltolásának problémáját az ablak átméretezésekor. A tároló középre helyezése a margó tulajdonságainak beállításával történik nulla érték margók felülről és automatikus az oldalakon (margó: 0 auto):
A változtatás után az összes blokk szigorúan egy sorban, középen fog sorakozni. És pozíciójuk a böngészőablak bármely méreténél sem változik. Így néz ki egy függőlegesen középre állított div: Bármilyen furcsán is hangzik, lehetséges. Néha szükség lehet egy div blokkra hivatkozásként az elrendezés során különféle fajták menü. Vegyünk egy gyakorlati példát a hivatkozási réteg megvalósítására:
A blokkelemek több lehetőséget biztosítanak a felület funkcionalitásának bővítésére, mint az elavult táblázatos elrendezés. Gyakran előfordul, hogy az oldal kialakítása egyedi és felismerhető. De fizetni kell a szabad hely ilyen exkluzív hiányáért. Főleg ez érinti kezdőlap, amelyen a legmagasabb a hirdetési költség. Ezért adódik a probléma, hogy hova "lökjön" még egyet reklám banner. És itt nem lehet megúszni a div-t az oldal közepére igazítani! Racionálisabb megoldás, ha valamilyen blokkot rejtenek el. Íme egy egyszerű példa egy ilyen megvalósításra:
Ez a varázsgomb. Ha rákattint, elrejti vagy megjeleníti a rejtett blokkot. Az elemek függőleges központosítása a CSS segítségével kihívást jelent a fejlesztők számára. Ennek megoldására azonban számos módszer létezik, amelyek meglehetősen egyszerűek. Ez a lecke 6 lehetőséget mutat be a tartalom függőleges központosítására. Kezdjük azzal Általános leírása feladatokat. A vízszintes központosítás nagyon egyszerű és könnyű. Ha a középre helyezett elem soron belüli, használja az igazítási tulajdonságot a szülőelemhez viszonyítva. Ha az elem blokk elem, akkor beállítjuk a szélességét és automatikus telepítés bal és jobb margók. A legtöbben használnak text-align tulajdonság: , nyissa meg a függőleges igazítás tulajdonságot, hogy függőlegesen középre állítsa. Minden elég logikusnak tűnik. Ha táblázatsablonokat használt, valószínűleg sokat használta a valign attribútumot, ami megerősíti azt a meggyőződést, hogy a függőleges igazítás a helyes út. De a valign attribútum csak a táblázatcellákon működik. És a függőleges igazítási tulajdonság nagyon hasonló. Ez hatással van a táblázatcellákra és néhány soron belüli elemre is. A függőleges igazítás tulajdonság értéke a szülő belső elemhez viszonyítva. Sajnos azonban a függőleges igazítás tulajdonság nem működik blokkszintű elemeken (például a div elemen belüli bekezdéseken). Ez a helyzet arra a gondolatra vezethet, hogy a függőleges igazítás problémájára nincs megoldás. De vannak más módszerek is a blokkszintű elemek központosítására, amelyek megválasztása attól függ, hogy mi kerül középre a külső tartályhoz képest. Ez a módszer akkor működik, ha egy szövegsort függőlegesen szeretné középre helyezni. Csak annyit kell tennie, hogy a sor magasságát nagyobbra kell állítani, mint a betűméret. Alapértelmezés szerint a szabad terület egyenletesen oszlik el a szöveg felett és alatt. És a vonal függőlegesen lesz középre állítva. A vonal magasságát gyakran az elem magasságával egyenlővé teszik. #gyermek ( sor magassága: 200 képpont; ) Ez a módszer minden böngészőben működik, bár csak egy sorhoz használható. A példában a 200 px értéket önkényesen választottuk ki. A szöveg betűméreténél nagyobb bármilyen értéket használhat. Mi van, ha a tartalom egy kép? Működni fog a fenti módszer? A válasz a CSS-kód másik sorában rejlik. #parent ( vonalmagasság: 200 képpont; ) #parent img ( függőleges igazítás: középen; ) A line-height tulajdonság értékének nagyobbnak kell lennie, mint a kép magassága. Mint fentebb említettük, a függőleges igazítás tulajdonság a táblázatcellákra vonatkozik, ahol kiválóan működik. Elemünket megjeleníthetjük táblázatcellaként, és a függőleges igazítás tulajdonság segítségével függőlegesen középre állíthatjuk a tartalmat. Jegyzet: A CSS-tábla nem azonos a HTML-táblázattal. #szülő (megjelenítés: táblázat;) #gyermek (megjelenítés: táblázatcella; függőleges igazítás: középen; ) A táblázat kimenetét a szülő div-re állítjuk, és a beágyazott div-t táblázatcellaként jelenítjük meg. Most már használhatja a függőleges igazítás tulajdonságot a belső tárolón. Minden benne lesz függőlegesen középen. A fenti módszertől eltérően ebben az esetben a tartalom lehet dinamikus, mivel a div elem átméreteződik, hogy illeszkedjen a tartalmához. A módszer hátránya, hogy az IE régebbi verzióiban nem működik. A beágyazott tárolóhoz a display: inline-block tulajdonságot kell használni. Ez a módszer minden böngészőben is működik. De ez megköveteli, hogy a középre helyezett elem magasságot kapjon. A példakód egyszerre végez vízszintes és függőleges központosítást: #szülő (pozíció: relatív;) #gyermek (pozíció: abszolút; felül: 50%; bal: 50%; magasság: 30%; szélesség: 50%; margó: -15% 0 0 -25%; ) Először beállítjuk az elemek pozicionálási típusát. Ezután a beágyazott div elemen állítsa a felső és bal oldali tulajdonságokat 50%-ra, ami a szülőelem közepe. De a középső a bal oldalt találja el felső sarok beágyazott elem. Ezért fel kell emelni (a magasság fele), és balra kell mozgatni (a szélesség fele), majd a középpont egybeesik a szülőelem középpontjával. Tehát ebben az esetben az elem magasságának ismerete szükséges. Ezután az elem negatív felső és bal margóját adjuk meg a magasság és a szélesség felével. Ez a módszer nem működik minden böngészőben. A példakód függőleges és vízszintes központosítást végez. #szülő (pozíció: relatív;) #gyermek (pozíció: abszolút; felül: 0; lent: 0; bal: 0; jobb: 0; szélesség: 50%; magasság: 30%; margó: automatikus; ) Ennek a módszernek az az ötlete, hogy a beágyazott elemet a szülőelem mind a 4 szegélyére nyújtsa úgy, hogy a felső, alsó, jobb és bal tulajdonságokat 0-ra állítja. A margók automatikus kialakításának beállítása minden oldalon eredményezi a feladatot egyenlő értékeket mind a 4 oldalon, és a beágyazott div elemünket a szülőelem közepére hozza. Sajnos ez a módszer nem működik IE7 és régebbi verziókban. Ez a módszer kifejezetten egyenlő kitöltést állít be a szülőelem felett és alatt. #szülő ( padding: 5% 0; ) #child ( padding: 10% 0; ) Kódban Példa CSS felső és alsó margó mindkét elemhez be van állítva. Beágyazott elem esetén a párnázás beállítása azt szolgálja, hogy függőlegesen középre állítsa. A szülőelem kitöltése pedig középre helyezi benne a beágyazott elemet. A relatív egységeket az elemek dinamikus átméretezésére használják. Az abszolút mértékegységeknél pedig el kell végezni a számításokat. Ha például a szülőelem 400 képpont magas, a beágyazott elem pedig 100 képpont magas, akkor felül és alul 150 képpontos kitöltés szükséges. 150 + 150 + 100 = 400 A % használata lehetővé teszi, hogy a számításokat a böngészőre bízza. Ez a módszer mindenhol működik. A hátránya a számítások szükségessége. Jegyzet: Ez a módszer az elem margójának beállításával működik. Az elemeken belül margókat is használhat. A margók vagy párnázás alkalmazására vonatkozó döntést a projekt sajátosságaitól függően kell meghozni. Ez a módszer egy üres div elemet használ, amely lebeg, és segít szabályozni a beágyazott elemünk pozícióját a dokumentumban. Vegye figyelembe, hogy a lebegő div a beágyazott elem elé kerül a HTML-kódban. #szülő (magasság: 250 képpont;) # úszó ( lebegés: bal; magasság: 50%; szélesség: 100%; margó-alsó: -50 képpont; ) #gyermek ( tiszta: mindkettő; magasság: 100 képpont; ) Az üres div-et balra vagy jobbra toljuk el, és a szülőelem 50%-ának megfelelő magasságot adunk neki. Így kitölti a szülőelem felső felét. Mivel ez a div lebegő, kikerül a dokumentum normál folyamatából, és le kell tekercselni a beágyazott elemet. A példa a clear: mindkettőt használja, de elegendő ugyanazt az irányt használni, mint a lebegő üres div eltolása. A beágyazott div elem felső határa közvetlenül az üres div elem alsó szegélye alatt van. A beágyazott elemet felfelé kell mozgatnunk a lebegő üres elem magasságának felével. A probléma megoldására egy lebegő üres div elem margin-bottom tulajdonságának negatív értékét használjuk. Ez a módszer minden böngészőben is működik. A használatához azonban szükség van egy további üres div elemre és a beágyazott elem magasságának ismeretére. Minden leírt módszer könnyen használható. A nehézség abban rejlik, hogy egyik sem alkalmas minden esetre. Elemezni kell a projektet, és ki kell választani a követelményeknek leginkább megfelelőt. A webdesignerek minden nap használják a DIV-eket a munkahelyükön. Túlzás nélkül ez a legnépszerűbb címke. Nyissa meg bármely webhely forrását, és látni fogja, hogy az objektumok nagy része, ha nem kétharmada be van zárva Az elem neve az angol division szóból származik, ami osztást jelent. Jelölés írásakor az elemek blokkokra bontására szolgál. A DIV-ek tartalomcsoportokat foglalnak magukba egy weboldalon. Például képek, bekezdések szöveggel. A címke semmilyen módon nem befolyásolja a tartalom megjelenítését, és nem hordoz szemantikai terhelést. A DIV támogatja az összes globális attribútumot. De a webdesignhoz csak kettőre van szüksége - egy osztályra és egy azonosítóra. A többire csak egzotikus esetekben fog emlékezni, és ez nem tény. Az igazítás attribútum, amelyet korábban a div középre vagy balra igazítására használtak, elavult. Képzelje el, hogy a webhely egy hűtőszekrény, a DIV-ek pedig műanyag tartályok, amelyek alapján rendeznie kell a tartalmat. Gyümölcsöt nem tesz egy edénybe a májzsemettel. Minden terméktípust külön-külön helyez el. A webtartalom hasonló módon jön létre. Nyissa meg bármelyik webhelyet, és ossza fel szemantikai blokkokra. Fejléc felül, lábléc alul, fő szöveg középen. Az oldalán általában egy kisebb oszlop található promóciós tartalommal vagy címkefelhővel.
Most részletesebben szedje szét az egyes részeket. Kezdje a fejléccel. A webhely fejlécének külön logója, navigációja, első szintű címsora és néha szlogenje is van. Rendeljen saját tárolót minden szemantikai blokkhoz. Ez nemcsak szétválasztja az elemeket a folyamatban, hanem megkönnyíti a formázásukat is. Sokkal könnyebb lesz az objektumot a DIV címkében középre helyezni, ha osztályt vagy azonosítót ad neki. A webes elemek megjelenítésekor a böngésző három tulajdonságot vesz figyelembe: kitöltés, margó és szegély. A padding a tartalom és a szegély közötti tér. Margó – az egyik objektumot a másiktól elválasztó mezők. A szegély vonalak a blokkok mentén. Egyszerre, vagy csak az egyik oldalról hozzárendelhetők: Ezek a tulajdonságok szabad teret adnak az objektumok között, és segítik őket a kívánt igazításban és elhelyezésben. Például, ha egy képet tartalmazó blokkot 20%-kal el kell tolni a bal széltől a középpontig, akkor a 20%-os értékű elemhez bal margót rendelünk: Block-with-img (margó-bal: 20%; ) Az elemek formázhatók szélességi értékük és negatív padding használatával is. Például van egy 200x200 képpont méretű blokk. Először rendeljen hozzá egy abszolút pozíciót, és mozgassa középre 50%-kal. Div(pozíció: abszolút; bal: 50%; ) Most, hogy megbizonyosodjon arról, hogy a DIV tökéletesen középre van állítva, adjon neki negatív bal oldali kitöltést, amely megegyezik a szélességének 50%-ával, azaz -100 képponttal: margó balra: -100 képpont A CSS-ben ezt "levegő eltávolításnak" nevezik. De van egy jelentős hátránya, hogy állandó számításokat kell végezni, ami meglehetősen nehéz elvégezni a több szintű beágyazást tartalmazó elemek esetében. Ha a padding és a border-widd be van állítva, akkor a böngésző alapértelmezés szerint a szegélyvastagság, a jobb oldali, a bal oldali kitöltés és maga a tartalom összegeként számítja ki a tároló méreteit, ami szintén meglepetést okozhat. Tehát amikor egy DIV-t kell középre helyeznie, használja a box-sizing tulajdonságot border-box értékkel. Ez megakadályozza, hogy a böngésző hozzáadja a kitöltés és a keret értéket a DIV elem teljes szélességéhez. Egy elem felemeléséhez vagy csökkentéséhez használjon negatív értékeket is. De ebben az esetben a tároló felső vagy alsó mezőjéhez is hozzárendelhetők. Ez egy egyszerű módja a nagy blokkok központosításának. Egyszerűen állítsa be a tároló szélességét és a margó tulajdonságot automatikus értékre. A böngésző középre helyezi a blokkot, ugyanazokkal a margókkal a bal és a jobb oldalon, és minden munkát maga végez. Ennek eredményeként nem kockáztatja meg a matematikai számítások összezavarodásának kockázatát, és jelentősen megtakarítja az időt. Használja az automatikus margó módszert a reszponzív alkalmazások fejlesztéséhez. A kulcs az, hogy a tárolónak szélességi értéket adjon meg ems-ben vagy százalékban. A fenti példából származó kód a DIV-t bármely eszközön középre helyezi, beleértve Mobiltelefonok, a képernyő 90%-át fogja elfoglalni. Alapértelmezés szerint a DIV elemek blokkelemeknek minősülnek, és a megjelenítési értékük blokk. Ehhez a módszerhez felül kell írnia ezt a tulajdonságot. Csak szülőtárolóval rendelkező DIV-ekhez használható: Az outer-div osztályú elemhez egy text-align tulajdonság van hozzárendelve center értékkel, amely a szöveget belülre helyezi. De egyelőre a böngésző a beágyazott DIV-t blokkobjektumnak tekinti. A text-align tulajdonság működéséhez az inner-div-t inline-ként kell kezelni. Ezért be CSS táblázat a belső div választóhoz írja be a következő kódot: Inner-div(megjelenítés: inline-block; ) A megjelenítési tulajdonságot blokkról inline-blockra módosítja. A lépcsőzetes stíluslapok lehetővé teszik a webes elemek tetszés szerinti mozgatását, ferdítését, elforgatását és átalakítását. Ehhez a transzformációs tulajdonságot használjuk. Értékként adjuk meg a kívánt transzformációtípust és mértéket. Ebben a példában a fordítással fogunk dolgozni: A fordítási funkció az elemet az aktuális helyéről balra/jobbra és fel/le mozgatja. Két értéket adunk zárójelben: Ha az elemet csak az egyik koordinátatengely mentén kell mozgatni, akkor a fordító szó után adja meg a tengely nevét és zárójelben a szükséges eltolás mértékét: Átalakítás: translateY(-20%); Egyes útmutatókban láthatja a szállítói előtagokkal történő átalakítást: webkit-transzformáció: lefordítás(50%, 50%); -ms-transzformáció: lefordítás(50%, 50%); transzformáció: fordít(50%, 50%); 2018-ban erre már nincs szükség, a tulajdonságot minden böngésző támogatja, így az Edge és az IE is. A szükséges DIV középpontba állításához a fordító CSS függvényt 50%-os értékkel írjuk a függőleges és vízszintes tengelyekre. Ez arra készteti a böngészőt, hogy az elemet az aktuális helyéről szélessége és magassága felére helyezze át. Meg kell adni a szélesség és magasság tulajdonságokat:
Ne feledje, hogy az elem, amelyre a transzformációs tulajdonságot alkalmazzák, az őt körülvevő objektumoktól függetlenül mozog. Ez egyrészt kényelmes, de néha mozgatva a DIV átfedhet egy másik konténert. Ezért a szalagelemek központosításának ez a módszere nem szabványos, és csak rendkívüli szükség esetén alkalmazzák. Az animációhoz az összes CSS-kánon szerinti transzformációt használjuk. A Flexbox figyelembe veszi bonyolult módon webelrendezési elrendezések. De ha elsajátítja, megérti, hogy sokkal könnyebb és élvezetesebb, mint szabványos módokon formázás. A Flexbox specifikáció rugalmas és hihetetlenül hatékony módja az elemek kezelésének. TÓL TŐL az angol nyelvből A modul neve "rugalmas konténer"-nek van lefordítva. A szélesség, magasság és az elemek elrendezésének értékei automatikusan beállíthatók, behúzások és margók kiszámítása nélkül. Az előző példákban már dolgoztunk a display tulajdonsággal, de beállítottuk blokk (block) és inline (inline-block) értékekre. Rugalmas elrendezések létrehozásához a display: flexet fogjuk használni. Először is szükségünk van egy rugalmas konténerre: A lépcsőzetes táblákban flex tárolóvá alakításához a következőket írjuk: Flex-container (kijelző: flex; ) Az összes benne beágyazott objektum, de csak a közvetlen gyermek, rugalmas elem lesz: Ha egy lista egy rugalmas tárolóban van elhelyezve, akkor a li listában lévő elemek nem számítanak rugalmas elemeknek. A Flexbox elrendezés csak az alábbi verziókon működik: A rugalmas elemek kezeléséhez szükség van a tartalom igazítására és az igazításra. A megadott értékektől függően ez a két tulajdonság szükség szerint automatikusan pozícionálja az objektumokat. Ha az összes beágyazott DIV-et középre kell helyeznünk, a justify-content: center, az align-items: center és semmi mást írunk. A böngésző elvégzi a munka többi részét:
Ha a szöveget olyan DIV-re szeretné helyezni, amely rugalmas elemek, használhatja a szabványos szövegigazítási trükköt. Vagy minden beágyazott DIV-t rugalmas tárolóvá alakíthat, és a tartalmat az justify-content segítségével kezelheti. Ez a módszer sokkal racionálisabb, ha sokféle tartalmat tartalmaz, beleértve a grafikákat, más beágyazott objektumokat, beleértve a többszintű listákat is. Minden elrendezéstervező folyamatosan szembesül azzal, hogy a tartalmat egy blokkba kell igazítani: vízszintesen vagy függőlegesen. Több jó cikk is van ebben a témában, de mindegyik sok érdekes, de kevés gyakorlati lehetőséget kínál, éppen ezért plusz időt kell pazarolni a fő dolog kiemelésére. Úgy döntöttem, hogy a számomra megfelelő formában küldöm el ezeket az információkat, hogy ne keressem tovább a Google-t. A CSS használatának legegyszerűbb módja az ismert magasságú (függőleges igazításhoz) vagy szélességű (vízszintes igazításhoz) dobozok igazítása. Néha nem lehet középre helyezni egy elemet, hanem szegélyeket adhat hozzá a " tulajdonsággal párnázás". Például van egy 200 x 200 pixeles kép, és egy 240 x 300 képpontos blokkba szeretné középre helyezni. Beállíthatjuk a magasságot és a szélességet. kültéri egység= 200 képpont, és adjon hozzá 20 képpontot a felső és alsó, valamint 50 a bal és jobb oldalhoz. Ha a blokk beállítása " pozíció: abszolút", akkor a legközelebbi szülőhöz viszonyítva pozicionálható "pozíció: relatív". Ehhez minden tulajdonság (" tetejére","jobb","alsó","bal") a belső blokk azonos értékének hozzárendeléséhez, valamint a "margó: auto". *Van egy árnyalat: A belső blokk szélessége (magassága) + a bal (jobb, alsó, felső) értéke nem haladhatja meg a szülőblokk méretét. Biztonságosabb, ha a bal (jobb, alsó, felső) tulajdonságokat 0-ra (nullára) állítjuk. A blokkban lévő szöveg igazításához van egy speciális tulajdonság " szöveg igazítás". Amikor a " központ" minden szövegsor vízszintesen igazodik többsoros szöveg ezt a megoldást rendkívül ritkán alkalmazzák, gyakrabban találkozhatunk ezzel a lehetőséggel feszítők, linkek vagy képek igazítására. Egyszer ki kellett találnom szöveget, hogy megmutassam, hogyan működik a szövegigazítás, mikor CSS segítség de semmi érdekes nem jutott eszembe. Először úgy döntöttem, bemásolok valahova egy mondókát, de eszembe jutott, hogy ez ronthatja a cikk egyediségét, és kedves olvasóink nem fogják megtalálni a Google-ben. És akkor úgy döntöttem, hogy ide írom ezt a bekezdést - elvégre nem nála van a lényeg, hanem az igazodásban. Érdemes megjegyezni, hogy ez a tulajdonság nem csak szövegnél fog működni, hanem minden soron belüli elemnél is ("display: inline"). De ez a szöveg balra van igazítva, de a burkolóhoz képest középre helyezett blokkban van. Az ismert szélességű blokkszintű elemek könnyen vízszintesen igazíthatók a "margin-left: auto; margin-right: auto" beállítással. Általában a rövidítést használják: " margó: 0 auto" (nulla helyett bármilyen érték lehet). Függőleges igazításnál ez a módszer nem működik. Így érdemes minden blokkot egymáshoz igazítani, ahol lehetséges (ahol nincs szükség fix vagy abszolút pozicionálásra) - ez a leglogikusabb és legmegfelelőbb. Noha ez nyilvánvalónak tűnik, időnként láttam megfélemlítő példákat negatív behúzással, ezért úgy gondoltam, pontosítok. Sokkal több probléma van a függőleges igazítással – a jelek szerint ez a CSS-ben nem volt előírva. Számos módja van a kívánt eredmény elérésének, de mindegyik nem túl szép. Abban az esetben, ha csak egy vonal van a blokkban, a függőleges igazítást a " vonalmagasság" és állítsa be a kívánt magasságra. A biztonság kedvéért be kell állítani a "height" értéket is, amelynek értéke megegyezik a "line-height" értékével, mert ez utóbbit nem minden böngésző támogatja. Az is lehetséges, hogy egy blokkot több vonallal igazítsunk. Ehhez egy további burkolóblokkot kell használnia, és ehhez kell beállítania a vonalmagasságot. A belső blokk lehet többsoros, de "inline"-nek kell lennie. Alkalmaznod kell rá a "vertikális igazítás: közép" kifejezést. A burkolóblokkban be kell állítani a "font-size: 0" értéket. Ha nem állítja be a betűméretet nullára, akkor a böngésző hozzáad néhány plusz képpontot magából. A belső blokk betűméretét és sormagasságát is meg kell adnia, mert ezek a tulajdonságok a szülőtől öröklődnek. Ingatlan " függőleges igazítás" a táblázat celláit is érinti. A "középre" beállított értéknél a cellán belüli tartalom középre kerül. Természetesen a táblázatos elrendezés manapság archaikusnak számít, de kivételes esetekben szimulálható "" megadásával kijelző: táblázat-cella". Általában ezt a lehetőséget használom függőleges igazításhoz. Az alábbiakban egy kész projektből vett elrendezési példa látható. Az ilyen módon függőlegesen középre helyezett kép az érdekes. Emlékeztetni kell arra, hogy ha az elemnek a "nincs"-től eltérő "lebegő" készlete van, akkor továbbra is blokk (megjelenítés: blokk) lesz - akkor további blokkburkolót kell használnia. A soron belüli elemekhez pedig alkalmazhatja a " függőleges igazítás: középen". Ebben az esetben minden elem a következővel: " kijelző: inline" amelyek ugyanazon a vonalon vannak, egy közös középvonalhoz igazodnak. Létre kell hoznia egy segédblokkot, amelynek magassága megegyezik a szülőblokk magasságával, ekkor a kívánt blokk középre kerül. Célszerű ehhez pszeudoelemeket használni:előtte vagy:utána. Ha nem sokat törődsz az Explorer 8 felhasználókkal, vagy annyira érdekelnek, hogy hajlandó vagy egy darab extra javascriptet bevinni nekik, akkor a "display: flex" használható. A flexibilis dobozok nagyon jól kezelik az igazítási problémákat, és elég a „margin: auto” beírása, hogy a tartalom középre kerüljön benne. Eddig ez a módszer gyakorlatilag nem találkozott velem, de nincs rá különösebb megkötés. Nos, csak erről akartam írni CSS-igazítás. Most már nem lesz probléma a tartalom központosítása!
1. szintű fejléc középen
1. szintű címsor, jobbra igazítva
A címke használatával történő elrendezés előnyei
Helymeghatározási segédeszközök
Tulajdonság szintaxisa:
úszó: bal | jobbra | egyik sem | örököl,
Ahol:
Bal blokk
jobb blokk
Most próbáljuk meg ugyanazt a tulajdonságot használni a harmadik div elhelyezésére az oldal közepén. De sajnos az úszónak nincs középértéke. És ha egy új blokk kap egy igazítási értéket jobbra vagy balra, akkor eltolódik a megadott irányba. Ezért már csak be kell állítani mindhárom blokkot lebegtetésre: balra: 
De ez sem a legjobb megoldás. Az ablak kicsinyítésekor minden réteg függőlegesen egy sorban sorakozik, a méret növelésekor pedig az ablak bal széléhez tapad. Tehát szükségünk van egy jobb módszerre a divek központosítására. Központosító rétegek
Bal blokk
központi blokk
jobb blokk
Ugyanez a példa bemutatja, hogyan lehet egy div-t vízszintesen középre helyezni. És ha kissé módosítja a fenti kódot, akkor elérheti a blokkok függőleges igazítását. Ehhez csak módosítani kell a tárolóréteg hosszát (csökkenteni). Vagyis a css szerkesztése után az osztálynak így kell kinéznie: 
A következő példában a rétegek tárolón belüli központosításához egy sor újat használtunk css tulajdonságait
:
Az általunk használt css tulajdonságok és értékük rövid leírása ezt a példát div középpontba helyezéséhez divben: Hogyan készítsünk hivatkozást egy rétegből
Ebben a példában a sormegjelenítés: block használatával a hivatkozást egy blokk elem értékére állítjuk be. És hogy a div teljes magassága link legyen, állítsa be a magasságot: 100%. Blokkelemek elrejtése és megjelenítése
Függőleges központosítási probléma
vonalmagasság módszer
HTML:
CSS:
Kép központosítása vonalmagassággal
HTML:
CSS:
CSS táblázat módszer
HTML:
CSS:
Abszolút pozicionálás és negatív margók
HTML:
CSS:
Abszolút pozicionálás és nyújtás
HTML:
CSS:
Egyforma párnázás felső és alsó
HTML:
CSS:
lebegő div
HTML:
CSS:
Következtetés
Mi az a DIV
Mikor érdemes DIV-ket használni?
Középre igazítsa a DIV-t a margókhoz
Hogyan lehet középre osztani a div blokkot automatikus margókkal
Igazítás a tulajdonságkijelzőn keresztül: inline-block
transzformáció/fordítás módszer
Flexbox elrendezéssel való munka
Rugalmas tárgyak elhelyezésének szabályai
Blokkok igazítása ismert méretekkel
Igazítás párnázással
Abszolút elhelyezett blokkok igazítása
Vízszintes igazítás
Igazítás "szöveg igazítása: középre"
Blokkok igazítása margókkal
Függőleges igazítás
Igazítás a line-height tulajdonsághoz
Függőleges igazítás a táblázatokban
Igazítás egy további soros elemmel
Kijelző: hajlítás és beállítás
