Mi az a DIV

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 align attribútum, amelyet korábban a div középre vagy balra igazításához használtak, elavult.

Mikor érdemes DIV-ket használni?

Képzelje el, hogy az oldal 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.

Középre igazítsa a DIV-t a margókhoz

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 be van állítva a kitöltés és a szegélyszélesség, akkor a böngésző alapértelmezés szerint a tároló méreteit a szegélyek szélességének, a jobb oldali, a bal oldali kitöltés és magának a tartalomnak az összegeként számítja ki, ami lehet meglepetés.

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.

Hogyan lehet középre osztani a div blokkot automatikus margókkal

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.

Igazítás a tulajdonságkijelzőn keresztül: inline-block

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ó:

Egy külső-div osztályú elem hozzá van rendelve text-align tulajdonság a 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.

átalakítás/fordítás módszer

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:

• vízszintes mozgás mértéke;
• függőleges mozgás mértéke.

Ha az elemet csak az egyik koordinátatengely mentén kell mozgatni, akkor a fordítás 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.

Flexbox elrendezéssel való munka

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:

Rugalmas tárgyak elhelyezésének szabályai

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 lényeg 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.

Blokkok igazítása ismert méretekkel

A CSS használatának legegyszerűbb módja az előre meghatározott magasságú (függőleges igazításhoz) vagy szélességű (vízszintes igazításhoz) dobozok igazítása.

Igazítás párnázással

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.

Abszolút elhelyezett blokkok igazítása

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.

Vízszintes igazítás

Igazítás "szöveg igazítása: középre"

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, hogy bemásolok valahova egy mondókát, de eszembe jutott, hogy ezzel elronthatja 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.

Blokkok igazítása margókkal

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 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.

Függőleges igazítás

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.

Igazítás a line-height tulajdonsághoz

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. Meg kell adnia a belső blokk betűméretét és sormagasságát is, mert ezek a tulajdonságok a szülőtől öröklődnek.

Függőleges igazítás a táblázatokban

Ingatlan " függőleges igazítás" a táblázat celláit is érinti. A "közép" é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ó a "" 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 mindenképpen blokk alakú lesz (megjelenítés: blokk) - akkor további blokkburkolót kell használnia.

Igazítás egy további soros elemmel

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.

Kijelző: hajlítás és beállítás

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!

A gyakorlatban gyakran meg kell oldani a tartalom csoportosításának és összehangolásának problémáját CSS használatával. Ma megvizsgáljuk az elemek vízszintes sorban történő elrendezésének fő módjait.

A cikk anyaga a kezdő webdesignereket kívánja segíteni a weboldalak elrendezésének technikáinak elsajátításában.

Mit válasszunk vagy módszerek

A szerkezeti elemek vízszintes síkban sorba rendezésének többféle módja van. szempontjából a leghasznosabb praktikus alkalmazás, vannak:

• "Float" módszer
• "Inline blokk" módszer
• táblázatcella módszer

Mindegyiknek megvannak a maga előnyei, alkalmazásai és hátrányai. Tekintsük őket sorrendben.

"Bunkónak" vagy egy kis elméletnek

Mind szerkezeti HTML elemek feltételesen felosztható:

Sorban(beépített) - típus img, spanés a hasonlók. Nem áll módunkban megváltoztatni a hátterüket és tetszőleges lineáris méreteket adni nekik.

Blokk– a szülőblokk teljes szélességét elfoglalva, mindig ezzel kezdje új sor – p, h, oszt.

Az alábbiakban szemléltető példa látható a soron belüli és blokkszerkezetekre:

Float módszer

Mint már ismert (lásd fent), egy blokkelem egy új sorba kerül, függetlenül a neki megadott szélességtől ( szélesség). Ezért a vízszintes méret csökkentése div-a, nem lehet tömböket egymás után építeni.

A legnépszerűbb (főleg a kezdő tördelőtervezők körében) megoldási mód az ingatlan használata úszó.

CSS tulajdonság úszó nagy népszerűségre és gyakorlati értékre tett szert a táblázatos elrendezésről a blokk elrendezésre való áttérés után.

Úszó: bal (jobb) blokkszintű elemet lebegővé alakít, a szülőblokk bal (jobb) széléhez igazítja, a tördelést pedig a szöveg és egyéb elemek jobbra (balra) állítja be.

Például hozzunk létre négy blokkot, amelyeket egy sorban kell elhelyezni:

< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" >Mi építkezünk < div class = "bblock" >vízszintes < div class = "bblock" >sor < div class = "bblock" >díváktól

És egy külső stíluslap a következő tartalommal:

div(float:bal; /*Csomagolókészlet*/ vonalmagasság: 120 képpont; betűméret: 40 képpont; háttér: dodgerblue; fehér szín; margintop: 60px; szélesség: 320 képpont /*A blokk szélességének rögzítése*/ }

Ennek eredményeként négy blokkot kapunk vízszintes sorban elhelyezve, és a szülőblokk bal széléhez igazítva:

A gyakorlatban néha szükséges a blokkokat a szülőelem jobb széléhez igazítani. Változtassuk meg az előző példában a blokkok körüli tekerést:

float:right;

Ügyeljen a blokkokban található feliratokra. Első pillantásra úgy tűnhet, hogy a példa ferdén működött. De valójában a böngésző helyesen dolgozta fel a kódot: felülről lefelé olvasta a blokkokat, és azt tette, amit kértünk tőle – jobbra igazítva. Ezt tartsa szem előtt az ingatlan használatakor float:jobbra.

Az elemek áramlásának egy adott helyről történő leállításához használja a következő sort:

< div style= "clear: both;" >

A fenti példában a blokkok közötti távolságot a behúzással állítjuk be margó-jobb. De mi van akkor, ha az oldal kirakásakor van egy feladat: helyezze el a blokkokat egy sorban, középre helyezze őket, és még úgy is, hogy a behúzások csak közöttük legyenek, kívül ne?

A műveletek algoritmusa a következő.

< div class = "wrap" > < div class = "bblock" >Mi építkezünk < div class = "bblock" >vízszintes < div class = "bblock" >sor < div class = "bblock" >díváktól

wrap(szélesség: 1310px; /*a csomagolóanyag szélességének rögzítése*/ margó: 0 auto; /*középre*/ háttér: sötétszürke; magasság: 120 képpont; /*Állítsa be a burkolólap magasságát*/) . bblock (lebegés: balra; /*Csomagolókészlet*/ vonalmagasság: 120 képpont; /*Sormagasság + vert. szöveg központosítás*/ betűméret: 40 képpont; háttér: dodgerblue; fehér szín; szélesség: 320 képpont /*A blokk szélességének rögzítése*/ margó-jobb: 10 képpont; szöveg igazítása: középre; /*A szöveg középre helyezése vízszintesen*/) . wrap : last-child ( margó-jobb: 0px; /*Az utolsó div margójának eltávolítása*/ }

Ennek eredményeként a következő képet kapjuk:

Nos, nem lehet minden gyakorlati helyzetet figyelembe venni, ezért térjünk át az általános jellemzőkre.

Fontos!!!

Inline blokk módszer

Mind az inline, mind a blokk elemeknek megvannak a maga előnyei és hátrányai az egyes megoldandó feladatok összefüggésében. De mi van, ha kombináljuk előnyeiket?

Ismerje meg a program fénypontját - az ingatlant kijelző: inline-block.

kijelző: inline-block blokk-inline elemet generál, amely lényegében inline, de megtartja a blokk tulajdonságait - lehetővé teszi a lineáris méretek megváltoztatását, a margók, behúzások stb.

Egy soron belüli blokk elem a következő tulajdonságokkal rendelkezik:

• a blokk magasságát és szélességét automatikusan meghatározza a tartalom és a kitöltési érték ( párnázás)
• a blokk magassága és szélessége rögzíthető
• Nincs határösszeomló hatás.

Vegyünk egy példát egy egyszerű létrehozására navigációs menü A, amely egy képet és egy hivatkozást tartalmaz.

< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Az 1. menü hivatkozása hosszabb a szokásosnál < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Menü link 2 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Menü link 3 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Menü link 4

Nav ( kijelző: inline-block; /*Block-line display*/ szélesség: 180 képpont /*blokkszélesség beállítása*/ háttér: dodgerblue; ) . string(text-align: center; /*A szöveg vízszintes igazítása*/ }

Ennek eredményeként a következő menüt kapjuk:

Amint látja, ferde lett... De nem áll szándékunkban elkeseredni, ezért a CSS tulajdonságot alkalmazzuk a div-einkre függőleges igazítás(a részleteket lásd alább):

függőleges igazítás: felső;

A navigációs sáv most a felső sorhoz igazodik:

Persze a megadott példa primitív, de biztos vagyok benne, hogy ez alapján lehet igazi remekművet alkotni!!!

Fontos!!!

• A régiek számára Firefox verziói adj hozzá egy sort:
  

  kijelző: -moz-inline-stack;

  
  és csomagolja be az elemet egy további div burkolóba.
• IE 7 és korábbi - sorok hozzáadása:
  

  zoom: 1 /*set hasLayout*/ * display: inline; /*csillag – hack for IE */ _magasság: 250 képpont; /*min-height nem működik IE6-ban*/

• Megjegyzem, bizonyos böngészők szelektíven reagálnak ezekre a sorokra (Firefox az elsőre, IE a többire).

Táblázat módszer

Táblázatos megközelítés hosszú ideje volt az elrendezési szabvány, ami elsősorban a jelölés egyszerűségének és intuitív voltának volt köszönhető. Valószínűleg ez okozta a táblázat formázásának megjelenését a CSS-ben.

Tulajdonságok kijelző: táblázat (táblázat cellája, inline-table), lehetővé teszi az elemek táblázatos formázását anélkül HTML alkalmazások táblázatok.

A blokkok vízszintes elhelyezéséhez szükségünk van egy szülőelemre, amely rendelkezik a tulajdonsággal kijelző: táblázat, és a tulajdonsággal rendelkező gyermekelemek (cellák). kijelző: táblázat-cella:

< div class = "wrap" > < div class = "bblock" >Mi építkezünk < div class = "bblock" >táblázatos < div class = "bblock" >sor < div class = "bblock" >díváktól

Bblock (kijelző: táblázat-cella; betűméret: 32px; szélesség: 200px; magasság: 200px; háttér: arany; szöveg-igazítás: középre; függőleges-igazítás: középre; ) . wrap (kijelző: táblázat; szegély-távolság: 20px 20px; háttérszín: sötétszürke; )

Fontos!!!

1. Ellentétben az "inline-block" és a "float" metódusokkal, amikor a webböngészőablak szélessége csökken, a cellák nem mozognak lefelé.
2. Nem tudja beállítani a margó tulajdonságot a pszeudotábla cellákhoz.
3. Keresztböngésző. A kijelző tulajdonságai: tábla* család nem támogatja az IE6, IE7. Ezenkívül az IE8-ban dinamikus renderelési hiba jelenhet meg a pszeudotábla-elemeknél, mint véletlenszerűen eltűnő celláknál. Ez a hiba leggyakrabban a dokumentum kezdeti rajzolásakor nyilvánul meg

Jó napot kívánok, a kiadvány előfizetői és olvasói. Ma szeretnék belemenni a részletekbe, és elmondom, hogyan lehet szöveget középre helyezni css-ben. Néhány korábbi cikkben közvetve érintettem ezt a témát, így Ön rendelkezik némi ismeretekkel ezen a területen.

Ebben a bejegyzésben azonban arról fogok beszélni mindenféle módon objektumok igazítását, és magyarázza el, hogyan lehet behúzni és újravonalolni a bekezdéseket. Tehát kezdjük el a tanulást!

Html és utódai és igazítsd

Ezt a módszert szinte soha nem használják, mivel a lépcsőzetes stíluslap eszközök kiszorították. Nem árt azonban annak tudata, hogy létezik ilyen címke.

Ami az érvényesítést illeti ezt a kifejezést cikkben részletesen le van írva, akkor maga a html specifikáció is elítéli a használatát < központ>, hiszen az érvényességhez tranzitív használata szükséges DOCTYPE>.