. Čak i s dolaskom HTML5 i pojavom ozbiljnih konkurenata u obliku članka ili zaglavlja, on se i dalje posvuda umeće u oznake. Stoga predlažem da razumijete pitanje formatiranja i centriranja div blokova.

Što je DIV

Naziv elementa dolazi od engleske riječi division, što znači dijeljenje. Prilikom pisanja oznaka, koristi se za razbijanje 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 align, koji se 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 generira se 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. Ovo neće samo 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 obrade 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:

div( border: 1px solid #333; border-left: none; )

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 formatirati korištenjem njihovih 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. Ovo ć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, oni se mogu dodijeliti ili 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:

transformiraj: prevedi (50%, 50%);

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 pomakne element u odnosu na njegov trenutni položaj za pola njegove š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, ovo je prikladno, ali ponekad kada se pomakne, DIV može preklapati 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 (zaslon: 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 drugo. 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 puno racionalnija ako sadrži raznovrstan sadržaj, uključujući grafiku, druge ugniježđene objekte, uključujući popise na više razina.

Često u praksi problem grupiranja i usklađivanja sadržaja moramo rješavati pomoću CSS-a. Danas ćemo pogledati glavne načine postavljanja elemenata u vodoravni red.

Materijal u ovom članku namijenjen je pomoći web dizajnerima početnicima u svladavanju tehnika izgleda web stranice.

Što odabrati ili metode

Postoji nekoliko načina za raspored konstrukcijskih elemenata u nizu u vodoravnoj ravnini. Najkorisniji, sa stajališta praktične primjene, su:

• Metoda "plutanja".
• "Inline-block" metoda
• Metoda tablica-ćelija

Svaki od njih ima svoje prednosti, primjene i nedostatke. Pogledajmo ih redom.

“Za iskorak” ili malo teorije

Svi strukturni elementi HTML-a mogu se podijeliti na:

U redu(ugrađeni) – vrsta img, raspon i slično. Nemamo mogućnost mijenjati njihovu pozadinu niti im dati proizvoljne linearne dimenzije.

Blok– zauzimaju cijelu širinu nadređenog bloka, uvijek počinju u novom retku – p, h, div.

Vizualni primjer inline i blok struktura dan je u nastavku:

Metoda plutanja

Kao što je već poznato (vidi gore), blok element se postavlja u novi red, bez obzira na širinu navedenu za njega ( širina). Stoga, smanjenje vodoravne veličine div-Oh, ne možete graditi blokove u nizu.

Najpopularnija metoda rješenja (osobito među dizajnerima početnicima) je korištenje svojstva plutati.

CSS svojstvo plutati stekao je veliku popularnost i praktičnu vrijednost nakon prelaska s tabelarnog izgleda na blokovni.

Plutanje: lijevo (desno) transformira element bloka u plutajući, poravnava ga s lijevim (desnim) rubom nadređenog bloka i postavlja tekst i druge elemente za prelamanje udesno (lijevo).

Na primjer, stvorimo četiri bloka koje je potrebno postaviti u red:

< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" >Mi gradimo < div class = "bblock" >horizontalna < div class = "bblock" >red < div class = "bblock" >od diva

I vanjski stilski list sa sljedećim sadržajem:

div (float: lijevo; /*Postavite omot*/ line-height: 120px; veličina fonta: 40px; pozadina: dodgeblue; boja: bijela; margin-top: 60px; širina: 320px; /*Popravite širinu bloka*/ }

Rezultat su četiri bloka raspoređena u vodoravni red i poravnata s lijevim rubom nadređenog bloka:

Ponekad je u praksi potrebno blokove poravnati s desnim rubom nadređenog elementa. Promijenimo tijek oko blokova u prethodnom primjeru:

plovak: desno;

Obratite pozornost na natpise koji se nalaze u blokovima. Na prvi pogled može se činiti da je primjer radio krivo. Ali zapravo, preglednik je pravilno obradio kod: pročitao je blokove odozgo prema dolje i učinio ono što smo tražili od njega - poravnao ga je udesno. Imajte ovo na umu kada koristite nekretninu plovak: desno.

Kako biste prekinuli tijek elemenata s određenog mjesta, koristite liniju:

< div style= "clear: both;" >

U gornjem primjeru postavili smo udaljenost između blokova pomoću uvlake margin-desno. Ali što učiniti ako prilikom postavljanja stranice imate zadatak: postaviti blokove u red, centrirati ih i također imati uvlake samo između njih, ali ne i izvana?

Algoritam radnji je sljedeći.

< div class = "wrap" > < div class = "bblock" >Mi gradimo < div class = "bblock" >horizontalna < div class = "bblock" >red < div class = "bblock" >od diva

Omotaj (širina: 1310px; /*popravite širinu omota*/ margina: 0 auto; /*centriraj*/ pozadina: tamno siva; visina: 120px; /*Postavite visinu omota*/) . bblock (float: lijevo; /*Postavite omot*/ line-height: 120px; /*Visina retka + vert. centriranje teksta*/ veličina fonta: 40px; pozadina: dodgeblue; boja: bijela; širina: 320px; /*Popravite širinu bloka*/ margina- desno: 10px; text- align: center; /*Centrirajte tekst vodoravno*/) . wrap : zadnje dijete ( margina desno: 0px; /*Ukloni polje posljednjeg diva*/ }

Kao rezultat toga, dobivamo sljedeću sliku:

Pa, ne možete uzeti u obzir sve praktične situacije, pa prijeđimo na opće značajke.

Važno!!!

Inline-block metoda

I inline i block elementi imaju svoje prednosti i nedostatke u kontekstu svakog konkretnog zadatka koji se rješava. Što ako spojite njihove prednosti?

Upoznajte vrhunac programa - imanje prikaz: inline-block.

prikaz: inline-block generira blok-linijski element, koji je u biti linijski element, ali zadržava svojstva bloka - omogućuje vam promjenu linearnih dimenzija, postavljanje margina, uvlaka itd.

Element blok linije ima sljedeća svojstva:

• Visina i širina bloka određuju se automatski na temelju sadržaja i vrijednosti ispune ( podstava)
• visina i širina bloka mogu se postaviti fiksno
• Nema efekta rušenja granica.

Pogledajmo primjer stvaranja jednostavnog navigacijskog izbornika koji sadrži sliku i poveznicu.

< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Veza izbornika 1 duža je nego inače < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Veza izbornika 2 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Veza izbornika 3 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Veza izbornika 4

Navigacija ( prikaz: inline- blok; /*Postavi prikaz blok reda*/širina: 180px; /*postavite širinu bloka*/ pozadina: dodgeblue; ) . string ( poravnanje teksta: središte; /*Poravnajte tekst vodoravno*/ }

Kao rezultat toga, dobivamo sljedeći izbornik:

Kao što vidite, ispalo je malo krivo... Ali ne namjeravamo se uzrujati, pa primjenjujemo svojstvo CSS na naše divove okomito poravnati(vidi dolje za detalje):

okomito poravnanje: gore;

Naša navigacijska traka sada je poravnata s gornjim redom:

Naravno, navedeni primjer je primitivan, ali siguran sam da na temelju njega možete stvoriti pravo remek-djelo!!!

Važno!!!

• Za starije verzije Firefoxa dodajte redak:
  

  prikaz: - moz- inline- stack;

  
  i omotajte element u dodatni div omotač.
• IE 7 i starije verzije - dodajte retke:
  

  zumiranje: 1 ; /*set hasLayout*/ * display: inline; /*zvjezdica – hack za IE */ _visina: 250 px; /*min-height ne radi u IE6*/

• Napominjem da određeni preglednici selektivno reagiraju na ove retke (Firefox na prve, IE na ostale).

Metoda tablice

Tablični pristup dugo je bio standard izgleda, prvenstveno zbog jednostavnosti i intuitivnosti označavanja. Najvjerojatnije je to uzrok pojavljivanja oblikovanja tablice u CSS-u.

Svojstva prikaz: stol (tablica-ćelija, inline-table), omogućuju izvođenje tabelarnog oblikovanja elemenata bez korištenja HTML tablica.

Da bismo postavili blokove vodoravno, potreban nam je nadređeni element koji ima svojstvo prikaz: stol, i podređeni elementi (ćelije) koji imaju svojstvo prikaz: tablica-ćelija:

< div class = "wrap" > < div class = "bblock" >Mi gradimo < div class = "bblock" >tablični < div class = "bblock" >red < div class = "bblock" >od diva

Bblock (prikaz: ćelija tablice; veličina fonta: 32px; širina: 200px; visina: 200px; pozadina: zlatna; poravnanje teksta: središte; okomito poravnavanje: sredina; ) . omot (prikaz: tablica; razmak obruba: 20px 20px; boja pozadine: tamno siva; )

Važno!!!

1. Za razliku od metoda "Inline-block" i "float", kod smanjenja širine prozora web preglednika ćelije se ne pomiču prema dolje.
2. Nemate mogućnost postavljanja svojstva margine za ćelije pseudo tablice.
3. Kompatibilnost s različitim preglednicima. IE6, IE7 ne podržavaju svojstva iz prikaza: tablica* obitelj. Osim toga, u IE8 možete vidjeti pogrešku dinamičkog renderiranja za pseudotabularne elemente u obliku ćelija koje nasumično nedostaju. Ova se greška najčešće pojavljuje tijekom početnog crtanja dokumenta.

Horizontalno i okomito poravnavanje elemenata može se izvesti na različite načine. Izbor metode ovisi o vrsti elementa (blok ili inline), vrsti njegovog pozicioniranja, veličini itd.

1. Horizontalno poravnanje prema središtu bloka/stranice

1.1. Ako je navedena širina bloka:

div ( širina: 300px; margina: 0 auto; /*centrirajte element vodoravno unutar nadređenog bloka*/)

Ako želite poravnati inline element na ovaj način, potrebno ga je postaviti na prikaz: blok;

1.2. Ako je blok ugniježđen unutar drugog bloka, a njegova širina nije navedena/određena:

.wrapper(text-align: center;)

1.3. Ako blok ima širinu i mora biti centriran na roditeljski blok:

.wrapper (pozicija: relativna; /*postavi relativnu poziciju za nadređeni blok tako da zatim možemo apsolutno pozicionirati blok unutar njega*/) .box ( širina: 400px; pozicija: apsolutna; lijevo: 50%; margin-lijevo: -200px; / *pomaknite blok ulijevo za udaljenost jednaku polovici njegove širine*/ )

1.4. Ako blokovi nemaju navedenu širinu, možete ih centrirati pomoću nadređenog bloka omotača:

.wrapper (text-align: center; /*postavite sadržaj bloka u središte*/) .box ( display: inline-block; /*poredite blokove horizontalno*/ margin-right: -0.25em; /* uklonite pravi razmak između blokova*/ )

2. Okomito poravnanje

2.1. Ako tekst zauzima jedan red, na primjer, za gumbe i stavke izbornika:

.button (visina: 50px; visina linije: 50px;)

2.2. Za okomito poravnanje bloka unutar nadređenog bloka:

.wrapper (pozicija: relativna;).box ( visina: 100px; pozicija: apsolutna; vrh: 50%; margina: -50px 0 0 0; )

2.3. Okomito poravnanje prema vrsti tablice:

.wrapper ( display: table; width: 100%; ) .box ( display: table-cell; height: 100px; text-align: center; vertical-align: middle; )

2.4. Ako blok ima zadanu širinu i visinu i mora biti centriran na roditeljski blok:

.wrapper (position: relative; ) .box ( height: 100px; width: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: auto; /*to sadržaj se nije proširio */ )

2.5. Apsolutno pozicioniranje u središtu stranice/bloka pomoću CSS3 transformacije:

ako su za element navedene dimenzije

div ( width: 300px; /*postavi širinu bloka*/ height:100px; /*postavi visinu bloka*/ transform: translate(-50%, -50%); position: absolute; top: 50 %; lijevo: 50% ;

ako element nema dimenzija i nije prazan

h1 (margina: 0; transformacija: translate(-50%, -50%); pozicija: apsolutna; vrh: 50%; lijevo: 50%; )

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 prethodnim č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 se metoda gotovo nikad 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 (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>.

Ovaj tipdopušta prolazak zabranjenih elemenata.

Sada prijeđimo na atribut uskladiti. Postavlja horizontalno poravnanje objekata na i uklapa se nakon deklaracije oznake. Obično se može koristiti za poravnavanje sadržaja ulijevo ( lijevo), uz desni rub ( pravo), centrirano ( centar) i po širini teksta ( opravdati).

U nastavku ću dati primjer u kojem ću sliku i pasus postaviti u središte.

Ovaj će sadržaj biti centriran.

Imajte na umu da za sliku atribut koji analiziramo ima malo drugačija značenja.

U primjeru koji sam koristio poravnaj="sredina". Zahvaljujući tome, slika je bila poravnata tako da se rečenica nalazi jasno u sredini slike.

Alati za centriranje u cssu

CSS svojstva dizajnirana za poravnavanje blokova, teksta i grafičkog sadržaja koriste se mnogo češće. To je prvenstveno zbog pogodnosti i fleksibilnosti implementacije stilova.

Pa počnimo s prvim svojstvom centriranja teksta - ovo je tekst-uskladiti.

Funkcionira na isti način kao align in . Među ključnim riječima možete odabrati jednu s općeg popisa ili naslijediti karakteristike pretka ( naslijediti).

Želio bih napomenuti da u css3 možete postaviti još 2 parametra: početak– ovisno o pravilima pisanja teksta (s desna na lijevo ili obrnuto), postavlja poravnanje lijevo ili desno (slično kao kod rada lijevo ili desno) i kraj– suprotno od početka (pri pisanju teksta slijeva nadesno djeluje kao desno, pri pisanju zdesna nalijevo – lijevo).

Rečenica s desne strane

Rečenica s krajem

Reći ću vam jedan mali trik. Prilikom odabira vrijednosti opravdati posljednja linija može neprivlačno visjeti s dna. Kako biste ga, primjerice, pozicionirali u središte, možete koristiti svojstvo tekst-poravnaj-zadnji.

Da biste okomito poravnali sadržaj stranice ili ćelije tablice, koristite svojstvo okomito poravnati. U nastavku sam opisao glavne ključne riječi elementa.

Ključna riječ	Svrha
Osnovna linija	Određuje poravnanje prema liniji pretka, koja se naziva bazna linija. Ako objekt predak nema takvu liniju, tada se poravnanje događa duž donje granice.
sredini	Sredina mutiranog objekta poravnata je s osnovnom linijom kojoj se dodaje visina nadređenog elementa.
dno	Dno odabranog sadržaja prilagođava se dnu objekta ispod njega.
vrh	Slično dnu, ali s gornjim dijelom predmeta.
super	Pravi znak nadnaredni.
pod	Stvara indeks elementa.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

C U E TOKODO

C U E TOKODO

Udubljenja

I na kraju dolazimo do uvlaka pasusa. CSS jezik koristi posebno svojstvo tzv tekstualna uvlaka.

Uz njegovu pomoć možete napraviti i crvenu liniju i izbočinu (morate odrediti negativnu vrijednost).

Da biste stvorili crvenu liniju, trebate znati samo jedan parametar.

Ovo je jednostavno svojstvo uvlačenja teksta.

Od autora: Ponovno vam želim dobrodošlicu na stranice našeg bloga. U današnjem članku želio bih govoriti o raznim tehnikama poravnanja koje se mogu primijeniti na blokove i njihov sadržaj. Konkretno, kako poravnati blokove u css-u, kao i poravnanje teksta.

Poravnavanje blokova prema sredini

U CSS-u, centriranje bloka je jednostavno. Ovo je mnogima najpoznatija tehnika, ali o njoj bih želio razgovarati prije svega. To znači horizontalno centrirano poravnanje u odnosu na nadređeni element. Kako se to radi? Recimo da imamo spremnik i naš eksperimentalni subjekt je u njemu:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Pretpostavimo da je ovo zaglavlje stranice. Ne proteže se cijelom širinom prozora i trebamo ga centrirati. Pišemo ovako:

#Zaglavlje( širina/maks. širina: 800px; margina: 0 auto;

Moramo odrediti točnu ili maksimalnu širinu, a zatim zapisati svojstvo ključa - margin: 0 auto. Postavlja vanjske margine našeg zaglavlja, prva vrijednost određuje gornju i donju marginu, a druga desnu i lijevu marginu. Vrijednost auto govori pregledniku da automatski izračuna ispunu s obje strane tako da je element točno centriran u roditelju. Udobno!

Poravnanje teksta

Ovo je također vrlo jednostavna tehnika. Za poravnavanje svih umetnutih elemenata, možete koristiti svojstvo poravnanja teksta i njegove vrijednosti: lijevo, desno, središte. Potonji centrira tekst, što je ono što nam treba. Možete čak i poravnati sliku na isti način, jer je ona također ugrađeni element prema zadanim postavkama.

Poravnajte tekst okomito

Ali ovo je kompliciranije. Prema zadanim postavkama ne postoji jednostavno, dobro poznato svojstvo koje lako centrira tekst okomito u blok spremniku. Međutim, postoji nekoliko tehnika koje su dizajneri izgleda smislili tijekom godina.

Postavite visinu bloka pomoću ispune. Način nije postaviti eksplicitnu visinu pomoću visine, već je umjetno stvoriti koristeći podstave na vrhu i dnu, koje bi trebale biti iste. Kreirajmo bilo koji blok i napišimo mu sljedeća svojstva:

div( pozadina: #ccc; padding: 30px 0; )

div( pozadina : #ccc; ispuna: 30px 0;

Pozadina je samo da se vizualno vide rubovi kao i podstava. Sada visinu bloka čine ove dvije uvlake i sama linija, a sve to izgleda ovako:

Definirajte visinu linije za blok. Mislim da je ovo ispravniji način ako trebate poravnati jedan redak teksta. Pomoću njega možete pisati visinu prema normali, koristeći svojstvo visine. Nakon toga također treba postaviti visinu linije, kao i visinu bloka u cjelini.

div(visina: 60px; visina linije: 60px; )

div( visina: 60px; line-height: 60px;

Rezultat će biti sličan gornjoj slici. Sve će raditi čak i ako dodate podstavu. Međutim, samo za jednu liniju. Ako trebate više teksta u elementu, tada ova metoda neće raditi.

Pretvorite blok u ćeliju tablice. Bit ove metode je da ćelija tablice ima svojstvo vertical-align: middle, koje okomito centrira element. Sukladno tome, u ovom slučaju blok treba postaviti na sljedeće:

div( prikaz: ćelija-tablica; okomito poravnanje: sredina; )

div( prikaz: tablica - ćelija; okomito - poravnati: sredina;

Ova metoda je dobra jer možete poravnati onoliko teksta koliko želite prema sredini. Ali bolje je napisati display: table u bloku u kojem je naš div ugniježđen, inače možda neće raditi.

Pa, dolazimo do posljednje tehnike za danas - ovo je okomito poravnanje samih blokova. Mora se reći da, opet, ne postoji nekretnina koja bi bila namijenjena upravo za to, ali postoji nekoliko trikova koje biste trebali znati.

Postavite uvlake kao postotak. Ako znate visinu nadređenog elementa i postavite drugi blok element unutar njega, možete ga centrirati pomoću postotnog ispuna. Na primjer, roditelj ima visinu od 600 piksela. U njega postavite blok visok 300 piksela. Koliko se trebate odmaknuti pri vrhu i dnu da biste ga centrirali? 150 piksela svaki, što je 25% visine roditelja.

Ova metoda dopušta poravnanje samo kada dimenzije dopuštaju izračune. A ako je vaš roditelj visok 887 piksela, onda nećete moći točno snimiti ništa, to je već jasno.

Umetanje elementa u ćeliju tablice. Opet, ako transformiramo nadređeni element u ćeliju tablice, tada će blok umetnut u nju biti automatski centriran okomito. Da biste to učinili, roditelj samo treba postaviti vertical-align: middle.

A ako uz ovo napišemo i margin: 0 auto, tada će element postati horizontalno centriran!