Poravnavanje DIV centra

, Čak i sa pojavom HTML5 i pojavom ozbiljnih konkurenata u obliku članka ili zaglavlja, on se i dalje svugdje ubacuje u markup. Stoga vam predlažem da se bavite problemom oblikovanja i usklađivanja divova u centru.

Što je div?

Naziv elementa dolazi od engleske podjele riječi, što znači podjela. Prilikom pisanja oznake koristi se za razbijanje elemenata u blokove. DIV obuhvaća grupe sadržaja na web stranici. Na primjer, slike, paragrafi s tekstom. Oznaka ne utječe na prikaz sadržaja i ne nosi nikakvo semantičko opterećenje.

DIV podržava sve globalne atribute. No, za web dizajn, trebate samo dvije - to je klasa i id. Sve ostalo ćete se sjetiti samo u egzotičnim slučajevima, a to nije činjenica. Atribut poravnanja, koji se prethodno koristio za centriranje DIV-a ili lijevo, zastario je.

Kada koristiti div

Zamislite da je mjesto hladnjak, a DIV su plastični kontejneri, po kojima je potrebno sortirati sadržaj. Nećete staviti voće u jednu posudu s kobasicom. Svaku vrstu proizvoda stavljate odvojeno. Slično tome, generira se i web-sadržaj.

Otvorite bilo koju stranicu i podijelite je na značajne blokove. Na vrhu poklopca, ispod podnožja, u središtu glavnog teksta. Tu je obično manji stupac na strani s reklamnim sadržajem ili oblakom oznaka.

Sada rastavite svaki odjeljak detaljnije. Počnite s zaglavljem. Zaglavlje stranice ima poseban logotip, navigaciju, naslov prve razine, ponekad slogan. Dodijelite svoj spremnik svakom semantičkom bloku. Dakle, ne samo da dijelite elemente u streamu, već ih i lakše formatirajte. Bit će vam puno lakše poravnati objekt u DIV oznaci u središtu tako što ćete mu dodijeliti klasu ili identifikator.

Poravnavanje DIV centra pomoću margina

Prilikom obrade web-elemenata, preglednik uzima u obzir tri svojstva: padding, marging i border. Padding padding je prostor između sadržaja i njegove granice. Margina - polja koja razdvajaju jedan objekt od drugog. Granica je crta duž blokova. Mogu se dodijeliti odmah sa svih strana ili samo s jedne strane:

 div{border: 1px solid #333;border-left: none;} 

Ta svojstva dodaju slobodan prostor između objekata, a također im pomažu pri poravnanju i smještaju prema potrebi. Na primjer, ako blok s slikom treba pomaknuti s lijevog ruba na središte za 20%, dodjeljujete element s marginom lijevo s vrijednošću od 20%:

 .block-with-img{margin-left: 20%;} 

Elementi se također mogu formatirati koristeći njihove širine i negativne uvlake. Na primjer, tu je blok dimenzija 200px po 200px. Prvo, dodijelili smo mu apsolutno pozicioniranje i prebacili ga u centar za 50%.

 div{position: absolute;left: 50%;} 

Sada, tako da je DIV idealno smješten u središtu, dajemo mu negativnu alineju s lijeve strane, jednaku 50% njene širine, tj. -100 piksela:

 margin-left: -100px; 

U CSS-u, ova metoda se naziva "uklanjanje zraka". No, to ima značajan nedostatak u potrebi za konstantnim izračunima, što je prilično teško napraviti za elemente s nekoliko razina gniježđenja. Ako su postavljeni padding i border-width, zadani preglednik će izračunati veličinu spremnika kao zbroj debljine obruba, padding desno, lijevo i sam sadržaj iznutra, što također može biti iznenađenje.

Dakle, kada trebate centrirati DIV, koristite svojstvo veličine kutije s vrijednošću graničnog okvira. Ne dopušta pregledniku da dodaje uvlake i granice ukupnoj širini DIV elementa. Za podizanje ili spuštanje elementa također primijenite negativne vrijednosti. Ali ih u tom slučaju možete dodijeliti gornjem ili donjem polju spremnika.

Kako uskladiti DIV blok u središtu pomoću automatskih polja

To je jednostavan način za centriranje velikih blokova. Možete jednostavno dodijeliti širinu spremnika i marginu svojstvu auto. Preglednik će postaviti blok u sredinu s istim poljima s lijeve i desne strane, radeći sav posao. Kao rezultat toga, ne riskirate da se upetljate u matematičke izračune i značajno uštedite vaše vrijeme.

 div{width: 90%;margin: 0 auto;} 

Upotrijebite metodu automatskog polja pri razvoju odgovarajućih aplikacija. Glavna stvar je dodijeliti spremniku vrijednost širine u em ili postotku. Kod iz gornjeg primjera će centrirati DIV u središtu i na bilo kojem uređaju, uključujući mobilne telefone, a zauzimat će 90% zaslona.

Poravnavanje kroz prikaz: svojstvo inline-block

Po defaultu, DIV elementi se smatraju blok, a njihova prikazna vrijednost je blokirana. Za ovu metodu morat ćete poništiti ovo svojstvo. Prikladno samo za DIV s nadređenim spremnikom:

  Bilo koji tekst 

Elementu vanjske klase dodijeljeno je svojstvo poravnanja teksta sa središnjom vrijednošću, koja tekst stavlja u središte. No, za sada, preglednik vidi ugrađeni DIV kao blok objekt. Da bi svojstvo poravnavanja teksta radilo, unutrašnji-div mora biti percipiran kao mala slova. Stoga u tablici CSS za unutarnji div izbornik napišete sljedeći kôd:

.inner-div{display: inline-block;} 

Svojstvo prikaza iz bloka u inline-blok.

Transform / translate metoda

Kaskadni listovi stilova pružaju mogućnost kretanja, košenja, rotiranja i transformacije web-elemenata na svaki način. Da biste to učinili, koristite svojstvo transformacije. Vrijednosti označavaju željeni tip pretvorbe i stupanj. U ovom primjeru radit ćemo s prijevodom:

 transform: translate(50%, 50%); 

Funkcija translate pomiče element iz trenutnog položaja lijevo / desno i gore / dolje. U zagradama su dane dvije vrijednosti:

• stupanj horizontalnog kretanja;
• stupanj kretanja okomito.

Ako element treba premjestiti samo uz jednu od koordinatnih osi, onda nakon riječi prevedete ime osi, au zagradi vrijednost traženog pomaka:

 transform: translateY(-20%); 

U nekim vodičima možete pronaći transformaciju s prefiksima dobavljača:

 -webkit-transform: translate(50%, 50%);-ms-transform: translate(50%, 50%);transform: translate(50%, 50%); 

2018. to više nije potrebno, a svojstvo podržavaju svi preglednici, uključujući Edge i IE.

Kako bi se DIV pomaknuo u središte, CSS translate funkcija je napisana s vrijednošću od 50% za vertikalnu i horizontalnu os. Zbog toga će preglednik pomaknuti element sa svoje trenutne pozicije za polovicu širine i visine. Potrebno je navesti svojstva širine i visine:

  Evo teksta 

Imajte na umu da se element na koji se primjenjuje svojstvo pretvorbe pomiče bez obzira na objekte oko njega. S jedne strane, to je zgodno, ali ponekad se kreće, DIV može blokirati drugi spremnik. Stoga se ova metoda centriranja web komponenti smatra nestandardnom i koristi se samo u hitnim slučajevima. Za animaciju se koriste transformacije nad svim kanonima CSS-a.

Rad s Flexbox-rasporedom

Flexbox se smatra teškim načinom postavljanja web izgleda. Ali ako ga ovladate, shvatit ćete da je mnogo jednostavnije i ugodnije od standardnih metoda formatiranja. Flexbox specifikacija je fleksibilan i nevjerojatno moćan način za rukovanje predmetima. Iz engleskog, naziv modula se prevodi kao “fleksibilni spremnik”. Vrijednosti širine, visine, položaja elemenata podešavaju se automatski, bez računanja udubljenja i margina.

U prethodnim primjerima već smo radili s svojstvom prikaza, ali smo ga pitali blok (blok) i vrijednost niza (inline-block). Za izradu fleksibilnih rasporeda koristit ćemo prikaz: flex. Prvo nam je potreban flex spremnik:

Da bismo ga pretvorili u flex spremnik u kaskadnim tablicama, pišemo:

 .flex-container{display: flex;} 

Svi objekti u njemu, ali samo izravni potomci, bit će flex-elementi:

  Prvi 
  Drugi 
  treći 
  Četvrti 

Ako stavite popis unutar flex spremnika, onda se stavke li se ne smatraju fleks elementima. Flexbox izgled će djelovati samo na ul:

Flex pravila smještaja

Da biste upravljali fleks elementima, potreban vam je sadržaj za poravnavanje i poravnavanje. Ovisno o navedenim vrijednostima, ova dva svojstva automatski postavljaju objekte prema potrebi. Ako moramo uskladiti sve ugniježdene DIV-ove u centru, pišemo justify-content: center, align-items: center i ništa drugo. Preglednik će obaviti ostatak posla:

  Prvi 
  Drugi 
  treći 
  Četvrti 

Da biste poravnali tekst u središtu DIV-a, koji su elementi fleksije, možete koristiti standardnu ​​tehniku ​​poravnavanja teksta. Ili možete napraviti svaki ugnježdeni div također flex-kontejnere i upravljati sadržajem sa justify-content. Ova metoda je mnogo racionalnija ako unutar sadrži različite sadržaje, uključujući grafiku, druge ugniježđene objekte, uključujući popise na više razina.