Što je DIV

Naziv elementa dolazi od engleske riječi division, što znači dijeljenje. Prilikom pisanja markupa koristi se za rastavljanje elemenata u blokove. DIV-ovi obuhvaćaju grupe sadržaja na web stranici. Na primjer, slike, odlomci s tekstom. Oznaka ni na koji način ne utječe na prikaz sadržaja i ne nosi nikakvo semantičko opterećenje.

DIV podržava sve globalne atribute. Ali za web dizajn trebate samo dva - class i id. Svih ostalih ćete se sjetiti samo u egzotičnim slučajevima, a to nije činjenica. Atribut poravnanja, koji se prethodno koristio za centriranje ili lijevo poravnanje divova, je zastario.

Kada koristiti DIV-ove

Zamislite da je mjesto hladnjak, a DIV-ovi su plastični spremnici u koje trebate sortirati sadržaj. Voće ne biste stavili u istu posudu s jetrenicom. Svaku vrstu proizvoda ćete postaviti zasebno. Web sadržaj se generira na sličan način.

Otvorite bilo koje web mjesto i podijelite ga na smislene blokove. Zaglavlje na vrhu, podnožje na dnu, glavni tekst u sredini. Sa strane se obično nalazi manji stupac s reklamnim sadržajem ili oblakom oznaka.

Sada pogledajte svaki odjeljak detaljnije. Počnite s zaglavljem. Zaglavlje stranice ima zaseban logotip, navigaciju, naslov prve razine, a ponekad i slogan. Svakom semantičkom bloku dodijelite vlastiti spremnik. To ne samo da će razdvojiti elemente u toku, već će ih i olakšati formatiranje. Bit će vam mnogo lakše centrirati objekt u DIV oznaci dajući mu klasu ili ID.

Centriranje DIV-ova pomoću margina

Prilikom renderiranja web elemenata, preglednik uzima u obzir tri svojstva: padding, margine i border. Padding je prostor između sadržaja i njegove granice. Margina - polja koja odvajaju jedan objekt od drugog. Granica je linija duž blokova. Mogu se dodijeliti svima odjednom ili samo jednoj strani:

Ova svojstva dodaju prostor između objekata i pomažu vam da ih pravilno poravnate i postavite. Na primjer, ako blok sa slikom treba biti pomaknut od lijevog ruba prema sredini za 20%, elementu dodijelite vrijednost lijeve margine od 20%:

Block-with-img( margin-left: 20%; )

Elementi se također mogu oblikovati korištenjem vrijednosti širine i negativnog ispuna. Na primjer, postoji blok s dimenzijama 200px x 200px. Prvo mu dodijelimo apsolutni položaj i pomaknimo ga u središte za 50%.

Div( pozicija: apsolutna; lijevo: 50%; )

Sada, kako bismo osigurali da je centrirani DIV savršeno postavljen, dajemo mu negativnu marginu ulijevo jednaku 50% njegove širine, što je -100 piksela:

Margin-lijevo: -100px;

U CSS-u se to zove "uklanjanje zraka". Ali ima značajan nedostatak u potrebi za stalnim izračunima, što je prilično teško učiniti za elemente s nekoliko razina gniježđenja. Ako su navedene vrijednosti ispune i širine obruba, preglednik će prema zadanim postavkama izračunati dimenzije spremnika kao zbroj debljine obruba, ispune s desne i lijeve strane i samog sadržaja unutra, što može također doći kao iznenađenje.

Dakle, kada trebate centrirati DIV, koristite svojstvo box-sizing s vrijednošću border-box. To će spriječiti preglednik da doda vrijednosti ispune i obruba ukupnoj širini DIV elementa. Za podizanje ili spuštanje elementa također koristite negativne vrijednosti. Ali u ovom slučaju, mogu se dodijeliti bilo gornjem ili donjem polju spremnika.

Kako centrirati DIV blok pomoću automatskih margina

Ovo je jednostavan način za centriranje velikih blokova. Jednostavno dodijelite širinu spremnika i svojstvo margine na auto. Preglednik će postaviti blok u sredinu s jednakim marginama s lijeve i desne strane, obavljajući sav posao sam. Kao rezultat toga, ne riskirate da se zbunite u matematičkim izračunima i značajno štedite svoje vrijeme.

Koristite metodu automatskog polja kada razvijate responzivne aplikacije. Glavna stvar je dodijeliti vrijednost širine spremniku u em ili postotku. Kôd u gornjem primjeru centrirat će DIV i na bilo kojem uređaju, uključujući mobilne telefone, zauzimat će 90% zaslona.

Poravnanje putem svojstva prikaza: inline-block

Prema zadanim postavkama, DIV elementi se smatraju blok elementima, a njihova vrijednost za prikaz je blok. Za ovu metodu morat ćete nadjačati ovo svojstvo. Prikladno samo za DIV-ove s nadređenim spremnikom:

Elementu s klasom outer-div dodijeljeno je svojstvo text-align s vrijednošću center, koja centrira tekst unutra. Ali za sada preglednik vidi ugniježđeni DIV kao blok objekt. Da bi svojstvo poravnanja teksta radilo, inner-div mora se tretirati kao mala slova. Dakle, u CSS tablicu za inner-div selektor napišete sljedeći kod:

Inner-div( display: inline-block; )

Promijenite svojstvo prikaza iz block u inline-block.

transformiraj/prevedi metodu

Kaskadni listovi stilova omogućuju pomicanje, naginjanje, rotiranje i na druge načine transformiranje web elemenata po želji. Za to se koristi svojstvo transformacije. Vrijednosti pokazuju željenu vrstu i stupanj transformacije. U ovom primjeru radit ćemo s prijevodom:

Funkcija prevođenja pomiče element s njegovog trenutnog položaja lijevo/desno i gore/dolje. U zagradama se prenose dvije vrijednosti:

• stupanj horizontalnog kretanja;
• stupanj vertikalnog kretanja.

Ako se element treba pomaknuti duž samo jedne od koordinatnih osi, tada nakon riječi translate navedite naziv osi i u zagradi iznos potrebnog pomaka:

Transformacija: translateY(-20%);

U nekim priručnicima možete pronaći transformaciju s prefiksima dobavljača:

Webkit-transformacija: prevedi (50%, 50%); -ms-transformacija: prevedi (50%, 50%); transformiraj: prevedi (50%, 50%);

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

Kako bismo centrirali DIV koji želimo, CSS translate funkcija je zapisana s vrijednošću od 50% za okomitu i vodoravnu os. To će uzrokovati da preglednik odmakne element od njegove trenutne pozicije za polovicu svoje širine i visine. Moraju se specificirati svojstva širine i visine:

Imajte na umu da se element na koji se primjenjuje svojstvo transformacije kreće neovisno o objektima koji ga okružuju. S jedne strane, to je prikladno, ali ponekad pomicanjem DIV može preklopiti drugi spremnik. Stoga se ova metoda centriranja web komponenti smatra nestandardnom i koristi se samo u slučajevima krajnje nužde. Za animaciju se koriste transformacije prema svim CSS kanonima.

Rad s Flexbox rasporedom

Flexbox se smatra sofisticiranim načinom dizajniranja web izgleda. Ali ako ga svladate, shvatit ćete da je puno jednostavniji i ugodniji od standardnih metoda oblikovanja. Flexbox specifikacija je fleksibilan i nevjerojatno moćan način za rukovanje elementima. Naziv modula preveden je s engleskog kao "fleksibilni spremnik". Vrijednosti širine, visine i rasporeda elemenata podešavaju se automatski, bez izračunavanja uvlaka i margina.

U prethodnim smo primjerima već radili sa svojstvom prikaza, ali smo ga postavili na vrijednosti bloka i inline-bloka. Za izradu flex izgleda koristit ćemo display: flex. Prvo trebamo fleksibilni spremnik:

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

Flex-kontejner (prikaz: flex; )

Svi ugniježđeni objekti, ali samo izravni potomci, bit će fleksibilni elementi:

Ako stavite popis unutar flex spremnika, tada se stavke li popisa ne smatraju flex elementima. Flexbox izgled će raditi samo na ul:

Pravila postavljanja savitljivih elemenata

Za upravljanje fleksibilnim stavkama potrebni su vam justify-content i align-items. Ovisno o vrijednostima koje navedete, ova dva svojstva automatski postavljaju objekte prema potrebi. Ako trebamo centrirati sve ugniježđene DIV-ove, pišemo justify-content: center, align-items: center i ništa više. Preglednik će sam obaviti ostatak posla:

Za centriranje teksta na DIV-ovima koji su fleksibilne stavke, možete koristiti standardnu ​​tehniku ​​poravnanja teksta. Ili možete učiniti svaki ugniježđeni DIV također fleksibilnim spremnikom i upravljati sadržajem koristeći justify-content. Ova je metoda mnogo racionalnija ako sadrži raznovrstan sadržaj, uključujući grafiku, druge ugniježđene objekte, uključujući popise na više razina.

CSS - Izgled i središnje poravnanje stranica stranice

Naša stranica sastoji se od četiri bloka: zaglavlje, izbornik, sadržaj i podnožje. Da centriramo stranicu, smjestit ćemo ova četiri bloka u jedan glavni blok:

Zaglavlje stranice

Sadržaj

Dno stranice

Koristeći ovu strukturu kao primjer, razmotrit ćemo nekoliko opcija.

Izgled i centriranje gumenog mjesta

Prilikom postavljanja gumene stranice glavna mjerna jedinica koja se koristi je -%, jer se stranica treba protezati po širini i zauzimati sav slobodni prostor.

Stoga će širina blokova "zaglavlje" i "podnožje" biti 100% širine zaslona. Neka širina bloka "izbornik" bude 30%, a blok "sadržaj" neka se nalazi pored bloka "izbornik", tj. mora imati lijevu marginu (margin-left) širine jednake širini bloka "menu", tj. trideset%.

Kako bi blokovi "izbornik" i "sadržaj" sjedili jedan pored drugog, učinimo da blok "izbornik" pluta i gurnimo ga do lijevog ruba. Također ćemo postaviti pozadinske boje za naše blokove. Sada napišimo sve ovo u listu stilova (na stranici style.css)

#header( background:#3e4982; width:100%; height:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( background:#6173cb; float :left; width:30%; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:30% ; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:100%; height:50px; text-align:center; color:#FFFFFF; font-size:14px; padding-top:10px; )

Visina blokova postavljena je uvjetno tako da je rezultat bio vidljiv. Pogledajte našu stranicu u svom pregledniku:

Ako promijenite veličinu prozora preglednika, promijenit će se širina svih blokova. Ovo nije uvijek zgodno, jer... Kada se blok izbornika razvuče, pojavljuje se prazan prostor. Stoga je širina bloka "izbornika" često fiksna, pa učinimo isto. Da biste to učinili, zamijenite vrijednosti odgovarajućih svojstava u listu stilova:

... #menu( background:#6173cb; float:left; width:200px; height:300px; ) #content( background:#ffffff; margin-left:200px; height:300px; ) ...

Sada se naša stranica prostire prirodnije. Uz fluidni raspored, stranice zauzimaju cijelu širinu zaslona, ​​tako da poravnanje stranice nije potrebno.

Ali ako želite, možete podesiti da vaša stranica ima jednaku udaljenost s lijeve i desne strane zaslona. Da biste to učinili, morate dodati stil "glavnom" bloku, koji je spremnik za sve ostale blokove:

Sada naša stranica izgleda ovako:

Izgled i centriranje stranice, fiksna širina

U ovom slučaju, morat ćemo postaviti fiksne veličine za naše blokove:

#main( width:800px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu ( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:800px; height:50px; text-align:center; color:#FFFFFF; font- veličina:14px; padding-top:10px; )

Sada je naša stranica pritisnuta na lijevi rub ekrana.

U ovom slučaju, središnje poravnanje stranica stranice može se izvršiti na sljedeći način. Podsjetimo se da naša stranica ima oznaku "body", kojoj se također može dati širina i malo ispune.

Učinimo ovo: dajte oznaci "body" širinu od 800 piksela (kao "glavni" blok) i padding-left od 50%. Tada će se cijeli sadržaj "glavnog" bloka prikazati na desnoj strani ekrana (tj. od sredine prema desno):

Da bi se naš "glavni" blok nalazio u sredini ekrana, njegova sredina se mora podudarati sa sredinom oznake "tijelo". Oni. trebate pomaknuti "glavni" blok ulijevo za pola njegove veličine. Širina "glavnog" bloka je 800 piksela, što znači da mu morate postaviti svojstvo "margin-left:-400px". Da, ovo svojstvo može imati negativne vrijednosti, tada se lijeva margina smanjuje (tj. pomiče ulijevo). A to je upravo ono što nam treba.

List stilova sada izgleda ovako:

body( width:800px; padding-left:50%; ) #main( width:800px; margin-left:-400px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center ; boja:#FFFFFF; veličina fonta:24px; padding-top:40px; ) #menu( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:800px; height:50px; text-align:center; color:#FFFFFF; font-size:14px; padding-top:10px; )

A naša stranica u pregledniku nalazi se točno u sredini:

Pogledali smo dvije opcije za centriranje stranica web mjesta; zapravo, one nisu dogma. Možete eksperimentirati i osmisliti vlastitu verziju, samo provjerite kako funkcionira u različitim preglednicima. Nažalost, ono što se dobro prikazuje u FireFoxu ili Operi može se prikazati potpuno nerazumljivo u IE-u i obrnuto. I ovo moramo zapamtiti.

Sretno vam u vašoj kreativnoj potrazi!



Ako vam je ova stranica bila korisna, pogledajte našu drugu

Analiziramo poravnanje blok elemenata u CCS. Stavljamo nekoliko u središte DIV ili LI elementi. Nudim nekoliko svojih opcija za većinu slučajeva.

Ovaj članak nema za cilj navesti sve mogućnosti poravnanja i prepisati ono što već negdje postoji. Ne sjećam se zašto, ali često nisam bio zadovoljan ponuđenim opcijama. Ili su postojali fiksni blokovi, ili se sve raspalo tijekom adaptivnog izgleda ili neki drugi nedostaci.

Ponekad je za poravnanje prema središtu dovoljno dodati nekoliko atributa i ne treba vam ništa komplicirano. Na primjer, i ja sam.

Ispod je nekoliko opcija za prilagodljivi izgled za poravnavanje blokova u sredini, koje sam koristim na svojim web stranicama. I ako je prvi prilično čest, onda možda neke druge metode neće biti niti opisane na Internetu na ovaj način.

opcija 1

Jednostavno poravnavanje svih blokova prema sredini stranice.

Idemo u centar UL sadržaj od 4 elementa LI, koji se nalaze u bloku DIV s razredom spremnik.

U ovom slučaju dovoljna su sljedeća pravila u CSS-u:

Spremnik (
širina: 100%;
}

Kontejner ul (
poravnanje teksta: središte;
list-style: nijedan;
}

Spremnik li (
prikaz: inline-block;
}

Dobivamo sljedeći pogled: Ovdje su centrirana 4 LI elementa. Kada se veličina zaslona smanji, elementi koji ne odgovaraju pomiču se prema dolje.

Ako blokovi LI s tim svojstvima nisu instalirani u središtu, što znači da ih neko drugo svojstvo ometa. Na primjer, ovo bi moglo biti vlasništvo float:lijevo ili prikaz: stol; ili neki drugi.

Sada možete dodati druge stilove u gornju strukturu (u osnovni okvir CSS poravnanja). Na primjer, napravite blokove fiksne veličine i međusobno uvucite:

Spremnik li (
prikaz: inline-block;
margina: 5px;
širina: 100px;
}

Dobivamo sljedeće:

Ali postoji jedan nedostatak ove opcije. Blokovi se nalaze u središtu, ali su velike udaljenosti lijevo i desno. Mogu se smanjiti promjenom širine.

Ili možete napraviti spremnike iste veličine tako da udubine budu samo između spremnika, a s lijeve i desne strane ih neće biti.

Onda ćemo ukloniti margina i dodajte širinu ovoga širina tako da potpuno pokrije područje.

Spremnik li (
okomito poravnanje: gore;
prikaz: inline-block;
širina: 32,899%;
}

Između blokova bit će mali prostor praznog prostora. A da biste ga učinili još većim, možete se povući unutra pomoću parametra podstava.

U blokove namjerno ne dodajem ništa dodatno kako bih ostavio upravo one stilove koji izravno utječu na poravnanje. Ali ako učinite isto, nećete dobiti takve blokove. Barem zato što, prvo, morate dodati boju bloku, a drugo, ako je prazan, stavite visina: 100px;. Ostali atributi su po vašoj želji.

Konačna verzija je:

Na gornjoj snimci zaslona ostavio sam ostala područja stranice tako da je jasno gdje su granice blokova, jer ako su uz rub, tada sam rub više nije vidljiv. A na slici su bijeli rubovi lijevo i desno različito poravnanje koje nema ništa zajedničko s dotičnim primjerom. Ponavljam, sami blokovi su uz rubove, koji nisu vidljivi, jer ih blokovi potpuno prekrivaju.

opcija 2

Postoji mnogo načina za centriranje blokova. Ali ako trebate napraviti poravnanje pametnije, morate razbiti mozak. Srećom, došao sam do zanimljive metode za sljedeće svrhe:

Kako centrirati sve divove tako da blok u sljedećem retku bude lijevo poravnat?

Imamo sljedeću strukturu:

Za njih pišemo tečajeve:

širina: 90%;
margina: 0 auto;
}

Arhiva-članak (
prikaz: inline-block;
okomito poravnanje: gore;

Širina: calc(33,3333% - (0,666666666667 * 36px));
margina: 0 10px 0 11px;
}

Imajte na umu da ako promijenite veličine kalk, tada morate eksperimentalno prilagoditi dimenzije margina. Inače blokovi neće biti centrirani.

Ovo poravnanje mora se izvršiti na oko. Ali ako ima manje blokova u novom retku nego u retku iznad, ovaj usamljeni blok bit će uz lijeva strana. I izgleda mnogo ljepše nego kada se u susjednoj liniji jedan jedini blok nalazi u centru.

Primjenom gornje tehnike dobit ćemo prilagodljivi izgled, sa svim rubovima jednakim, koji se neće pogoršati mijenjanjem veličina zaslona.

A ako želimo da mobilna verzija nema 3 bloka, već 2, tada ćemo u ccs za razlučivost od 768 piksela blokove podijeliti drugačije:

@medijski zaslon i (maksimalna širina: 768px) (
.arhivski-članak (
širina: calc(47,3333% - (0,666666666667 * 25px));
margina: 0 10px 0 20px;
}
}

Uzmimo iste blokove u mobilnoj verziji, ali s dva bloka po retku:

Opcija 3

Sada ćemo poravnati pomoću savijati. Ovo se može činiti kao idealan način za izravnavanje, jer zapravo radi vrlo jednostavno. Međutim, FLEX se ne nosi sa zadatkom opisanim u opciji 2. Barem ja nisam uspio postići iste rezultate.

Na sljedeći odjeljak:

Dodavanje stilova:

#cssmenu (
margina: 20px auto;
}

#cssmenu ul (
list-style: nijedan;
zaslon: savitljiv;
flex-wrap: omot;
justify-content: centar;
}

#cssmenu > ul > li (
margina: 1px;
}

Dobivamo:

U navedenom primjeru:

flex-wrap: omot;

Premješta blokove u sljedeći redak ako popune spremnik. Inače će ići dalje izvan prozora preglednika.

justify-content: centar;

Poravnavamo sadržaj blokova prema sredini.

Opcija 4

Još jedna mogućnost poravnanja pomoću flex tehnologije.

Imamo kontejner s dva bloka unutra. Potrebna su nam ova 2 bloka da podijelimo širinu na dvije jednake strane.

Da bismo to učinili, zapisat ćemo sljedeća svojstva u stilovima:

Spremnik (
zaslon: savitljiv;
}

Blok (
fleksibilna osnova: 100%;
}

Opcija 5

Postoji još jedna opcija za centriranje blokova, ako je njihov broj strogo jednak. Na primjer: postoji 9 blokova, 3 za svaki red. I znate da će tako uvijek ostati. Na primjer, stvarate odredišnu stranicu i sigurno znate da ništa nepotrebno neće biti dodano na web mjesto između ovih blokova.

Dakle, imamo 9 blokova sljedećeg tipa (nisam duplicirao linije 9 puta, ali imajte na umu da postoji 9 blokova):

Primijenite stilove za njih:

Arhivski spremnik-za-članke (
širina: 100%;
poravnanje teksta: središte;
}

Arhiva-članak (
širina: 25%;
okomito poravnanje: gore;
prikaz: inline-block;
poravnanje teksta: lijevo;
}

Arhiva-članak:nth-child(1),
.archive-article:nth-child(4),
.archive-article:nth-child(7) (
margina: 20px 0 30px 40px;
}

Arhiva-članak:nth-child(2),
.archive-article:nth-child(5),
.archive-article:nth-child(8) (
margina: 20px 40px 30px;
}

Arhiva-članak:nth-child(3),
.archive-article:nth-child(6),
.archive-article:nth-child(9) (
margina: 20px 40px 30px 0;
}

Dobit ćemo i prilagodljivi izgled. Kada se zaslon smanji, blok koji ne stane ići će dolje u sredinu

Prednost ove vrste centriranja je u tome što možete jasno i jasno napraviti udubljenja između blokova.

Glavni nedostatak je što se ništa ne može staviti unutar blokova. Bilo koji element:

ili div ili str ili nešto drugo, smatrat će se unutarnjim elementom n-to dijete. Kao rezultat toga, CSS stilovi će biti superponirani na njega i sve uvlake napravljene korištenjem margine će pomaknuti blokove drugačije nego što je izvorno predviđeno.

U CSS-u neke naizgled jednostavne stvari nije tako lako napraviti. Jedna od tih stvari je poravnanje, tj. kada jedan element treba postaviti na određeni način u odnosu na drugi.

Ovaj članak predstavlja neka gotova rješenja koja će vam pomoći u pojednostavljenju rada vodoravnog i/ili okomitog centriranja elemenata.

Napomena: Ispod svakog rješenja je popis preglednika koji označava verzije u kojima navedeni CSS kod radi.

CSS - Center Align Block

1. Poravnanje jednog bloka prema sredini drugog. U ovom slučaju, prvi i drugi blok imaju dinamičke veličine.

Roditelj ( pozicija: relativna; ) .dijete ( pozicija: apsolutna; lijevo: 50%; gore: 50%; -webkit-transformacija: prevedi (-50%, -50%); -moz-transformacija: prevedi (-50% , -50%); -ms-transform: prevedi (-50%, -50%); -o-transform: prevedi (-50%, -50%); transform: prevedi (-50%, -50%) ;)

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

2. Poravnanje jednog bloka prema sredini drugog. U ovom slučaju, drugi blok ima fiksne dimenzije.

Roditelj ( pozicija: relativna; ) .dijete ( pozicija: apsolutna; lijevo: 50%; gore: 50%; /* širina i visina 2 bloka */ širina: 500px; visina: 250px; /* Vrijednosti se određuju ovisno na njegovu veličinu */ /* margin-left = - širina / 2 */ margin-left: -250px; /* margin-top = - visina / 2 */ margin-top: -125px; )

Preglednici koji podržavaju ovo rješenje:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

3. Poravnavanje jednog bloka prema sredini drugog. U ovom slučaju, drugi blok ima dimenzije navedene u postocima.

Roditelj ( pozicija: relativna; ) .dijete ( pozicija: apsolutna; /* širina i visina 2 bloka u % */ visina: 50%; širina: 50%; /* Vrijednosti se određuju ovisno o njegovoj veličini u % * / lijevo: 25%; /* (100% - širina) / 2 */ gore: 25%; /* (100% - visina) / 2 */ )

Preglednici koji podržavaju ovo rješenje:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

CSS - Horizontalno poravnanje

1. Poravnanje jednog elementa bloka (prikaz: blok) u odnosu na drugi (u kojem se nalazi) vodoravno:

Blokiraj ( margin-lijevo: auto; margin-desno: auto; )

Preglednici koji podržavaju ovo rješenje:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Vodoravno poravnavanje elementa linije (prikaz: inline) ili elementa bloka linije (prikaz: inline-block):

Roditelj ( poravnanje teksta: centar; ) .dijete ( prikaz: umetnuti blok; )

Preglednici koji podržavaju ovo rješenje:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

CSS - okomito poravnanje

1. Centrirajte jedan element (display: inline, display: inline-block) u odnosu na drugi (u kojem se nalazi) u središtu. Roditeljski blok u ovom primjeru ima fiksnu visinu koja je postavljena pomoću CSS svojstva line-height.

Roditelj (line-height: 500px;) .child (display: inline-block; vertical-align: middle;)

Preglednici koji podržavaju ovo rješenje:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Centriranje jednog bloka u odnosu na drugi okomito predstavljanjem roditelja kao tablice, a djeteta kao ćelije ove tablice.

Roditelj ( display: table; ) .child ( display: table-cell; vertical-align: middle; )

Preglednici koji podržavaju ovo rješenje:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

Ako znate neke druge zanimljive trikove ili korisna gotova rješenja za poravnanje, podijelite ih u komentarima.

Dobar dan, pretplatnici i čitatelji ove publikacije. Danas želim ići u detalje i reći vam kako centrirati tekst u CSS-u. U nekim prijašnjim člancima neizravno sam se dotakao ove teme, tako da imate neka znanja iz ovog područja.

Međutim, u ovoj ću vam publikaciji reći o svim različitim načinima poravnavanja objekata, a također ću vam objasniti kako uvući i uvući odlomke. Pa krenimo s učenjem gradiva!

HTML i njegovi potomci i poravnati

Ova metoda se gotovo nikada ne koristi, jer su je zamijenili kaskadni stilski alati. Međutim, saznanje da takva oznaka postoji neće vam škoditi.

Što se tiče provjere valjanosti (ovaj pojam je detaljno opisan u članku ""), sama html specifikacija osuđuje korištenje < centar>, budući da je za valjanost potrebno koristiti prijelaz DOCTYPE>.