način da se prikaže kao tabela, nakon toga možemo koristiti svojstvo vertical-align u njoj (koje radi različito na različitim elementima).

#wrapper( display: table; ) #cell( display: table-cell; vertical-align: middle; )

pros

• Sadržaj može dinamički mijenjati visinu (visina nije definirana u CSS-u).
• Sadržaj se ne skraćuje ako za njega nema dovoljno prostora.

Minusi

• Ne radi u IE 7 i starijim verzijama
• Mnogo ugniježđenih oznaka

2. metoda

Ova metoda koristi apsolutno pozicioniranje diva, čiji je gornji dio postavljen na 50% i njegova gornja margina (margin-top) minus polovina visine sadržaja. Ovo implicira da objekat mora imati fiksnu visinu, koja je definisana u CSS stilovima.

Pošto je visina fiksna, možete postaviti overflow:auto; za div koji sadrži sadržaj, tako da ako sadržaj ne odgovara, pojavit će se trake za pomicanje.

#content ( pozicija: apsolutna; vrh: 50%; visina: 240px; margin-top: -120px; /* minus polovina visine */ )

pros

• Radi u svim pretraživačima.
• Bez dodatnih ulaganja.

Minusi

• Kada nema dovoljno prostora, sadržaj nestaje (npr. div je unutar tijela i korisnik smanjuje prozore, u kom slučaju se trake za pomicanje neće pojaviti.

3rd method

U ovoj metodi ćemo omotati sadržaj div sa drugim div. Postavite njegovu visinu na 50% (visina: 50%;) i donju marginu na polovinu njegove visine (margin-bottom:-contenttheight;). Sadržaj će očistiti float i biti centriran.

#floater( float: lijevo; visina: 50%; margin-bottom: -120px; ) #content( clear: oba; visina: 240px; pozicija: relativna; )

pros

• Radi u svim pretraživačima.
• Kada nema dovoljno prostora (na primjer, kada se prozor smanji) sadržaj nije odsječen, pojavit će se trake za pomicanje.

Minusi

• Mislim samo jedno: da se koristi dodatni prazan element.

4. metod.

Ova metoda koristi poziciju:apsolutno svojstvo; za divove sa fiksnim dimenzijama (širina i visina). Zatim postavljamo njegove koordinate top:0; bottom:0; , ali budući da ima fiksnu visinu, ne može se rastegnuti i centriran je. Ovo je vrlo slično dobro poznatoj metodi horizontalnog centriranja elementa na nivou bloka fiksne širine (margina: 0 auto;).

#content( pozicija: apsolutna; gore: 0; dolje: 0; lijevo: 0; desno: 0; margina: auto; visina: 240px; širina: 70%; )

pros

• Veoma jednostavno.

Minusi

• Ne radi u Internet Exploreru
• Sadržaj će biti isječen bez traka za pomicanje ako nema dovoljno prostora u kontejneru.

5. metod

Ovu metodu možete koristiti za centriranje jednog reda teksta. Samo postavite visinu teksta (line-height) na visinu elementa (height). Nakon toga, linija će biti prikazana u sredini.

#content(visina: 100px; visina linije: 100px;)

pros

• Radi u svim pretraživačima.
• Ne seče tekst ako ne odgovara.

Minusi

• Radi samo sa tekstom (ne radi sa blok elementima).
• Ako postoji više od jednog reda teksta, izgleda vrlo loše.

Ova metoda je vrlo korisna za male elemente, kao što je centriranje teksta u gumbu ili tekstualnom polju.

Sada kada znate kako postići vertikalno centralno poravnanje, napravimo jednostavnu web stranicu koja će na kraju izgledati ovako:

Korak 1

Uvijek je dobro početi sa semantičkim označavanjem. Naša stranica će biti ovako strukturirana:

• #floater (za centriranje sadržaja)
• #centred (centralni element)
  • #side
    • #logo
    • #nav (list
    • #content
  • #bottom (za autorska prava i sve)

  Napišimo sljedeće html oznake:

  Kompanija

  • Dom
  • Proizvodi
  • Blog
  • kontakt
  • O

  Naslov stranice

  Holistički reinženjering outsourcinga s dodanom vrijednošću nakon suradnje i razmjene ideja usmjerene na procese. Energetski pojednostavite uticajna tržišna niša putem omogućenih imperativa. Holistički preovlađujte premium inovacije nakon uvjerljivih scenarija. Besprekorno iskoristite visoke standarde u ljudskom kapitalu sa vrhunskim proizvedenim proizvodima. Izrazito udružiti sheme usklađene sa standardima prije robusnih vortala. Jedinstveno rekaptiualizirajte iskorištenu web-spremnost u odnosu na informacije izvan kutije.

  Naslov 2

  Efikasno prihvatite prilagođenu web-spremnost, a ne procese usmjerene na kupca. Asertivno razvijajte imperative na više platformi u odnosu na proaktivne tehnologije. Pogodno osnažite multidisciplinarne meta-usluge bez interfejsa za cijelo preduzeće. Pogodno pojednostavite konkurentna strateška tematska područja sa fokusiranim e-tržištima. Fosfluorescentno sindikalne zajednice svjetske klase vis-a-vis tržišta s dodanom vrijednošću. Na odgovarajući način ponovo osmislite holističke usluge prije robusnih e-usluga.

  Obavijest o autorskim pravima nalazi se ovdje

  Korak 2

  Sada ćemo napisati najjednostavniji CSS za postavljanje elemenata na stranicu. Trebali biste sačuvati ovaj kod u datoteci style.css. Na njemu je veza upisana u html datoteci.

  Html, tijelo ( margina: 0; dopuna: 0; visina: 100%; ) tijelo (pozadina: url("page_bg.jpg") 50% 50% bez ponavljanja #FC3; porodica fontova: Georgia, Times, serifi; ) #floater ( pozicija: relativna; float: lijevo; visina: 50%; margin-bottom: -200px; širina: 1px; ) #centered (pozicija: relativna; čisto: lijevo; visina: 400px; širina: 80%; maks. -širina: 800px; minimalna širina: 400px; margina: 0 auto; pozadina: #fff; granica: 4px čvrsta #666; ) #dno (pozicija: apsolutna; donja: 0; desno: 0; ) #nav (pozicija: apsolutno; lijevo: 0; gore: 0; dno: 0; desno: 70%; padding: 20px; margina: 10px; ) #content ( pozicija: apsolutna; lijevo: 30%; desno: 0; gore: 0; dolje: 0; overflow: auto; visina: 340px; padding: 20px; margina: 10px; )

  Prije nego što možemo napraviti naš sadržaj centriran, moramo postaviti visinu tijela i html-a na 100%. Budući da se visina razmatra bez unutrašnjeg i vanjskog dopuna (odmak i margina), postavljamo ih (odmak) na 0 tako da nema traka za pomicanje.

  Donji padding za "floater" element je minus polovina visine sadržaja (400px), odnosno -200px;

  Vaša stranica bi sada trebala izgledati otprilike ovako:

  

  Širina #centered elementa je 80%. Ovo čini našu stranicu užim na malim ekranima i širim na većim. većina sajtova izgleda ružno na novim širokim monitorima u gornjem levom uglu. Svojstva min-width i max-width također ograničavaju našu stranicu tako da ne izgleda preširoka ili preuska. Internet Explorer ne podržava ova svojstva. Treba ga postaviti na fiksnu širinu.

  Pošto je #centered element postavljen na position:relative, možemo koristiti apsolutno pozicioniranje elemenata unutar njega. Zatim postavite overflow:auto; za element #content tako da se pojavljuju trake za pomicanje ako nema sadržaja koji bi stao.

  Korak 3

  I posljednja stvar koju ćemo učiniti je dodati malo stila kako bi stranica izgledala malo privlačnije. Počnimo s jelovnikom.

  #nav ul ( stil liste: nema; padding: 0; margina: 20px 0 0 0; uvlaka teksta: 0; ) #nav li ( padding: 0; margina: 3px; ) #nav li a (prikaz: blok; background-color: #e8e8e8; padding: 7px; margina: 0; text-decoration: nema; boja: #000; border-bottom: 1px solid #bbb; text-align: right; ) #nav li a::after ( sadržaj: """; boja: #aaa; font-weight: bold; display: inline; float: desno; margina: 0 2px 0 5px; ) #nav li a:hover, #nav li a:focus (pozadina: # f8f8f8; border-bottom-color: #777; ) #nav li a:hover::after ( margin: 0 0 0 7px; boja: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )

  Prva stvar koju smo uradili da bi meni izgledao bolje je da smo uklonili oznake tako što smo postavili atribut list-style:none, a takođe smo postavili padding i padding, pošto se podrazumevane vrednosti u velikoj meri razlikuju između pretraživača.

  Imajte na umu da smo tada naveli da se veze trebaju prikazati kao elementi na nivou bloka. Sada, kada su prikazani, rastegnuti su po cijeloj širini elementa u kojem se nalaze.

  Još jedna zanimljiva stvar koju smo koristili za menije je pseudo-klasa :prije i :poslije. Omogućuju vam da dodate nešto prije i poslije elementa. Ovo je dobar način da dodate ikone ili simbole poput strelice na kraju svake veze. Ovaj trik ne radi u Internet Exploreru 7 i starijim verzijama.

  

  Korak 4

  I na kraju, ali ne i najmanje važno, našem dizajnu ćemo dodati veo za još više ljepote.

  #centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 (familija fontova: Helvetica, Arial, sans- serif; font-weight: normal; color: #666; ) h1 (boja: #f93; border-bottom: 1px solid #ddd; prored slova: -0,05em; font-weight: bold; margin-top: 0; padding-top: 0; ) #bottom ( padding: 10px; veličina fonta: 0,7em; boja: #f03; ) #logo (font-size: 2em; text-align: center; boja: #999; ) #logo jak (font-weight: normal; ) #logo span (display: block;font-size: 4em; line-height: 0.7em; color: #666; ) p, h2, h3 (line-height: 1.6em; ) a ( boja: #f03; )

  U ovim stilovima postavljamo zaobljene uglove za #centered element. U CSS3, ovo će biti obrađeno svojstvom border-radius. Ovo još nije implementirano u nekim pretraživačima, osim što se koriste prefiksi -moz i -webkit za Mozilla Firefox i Safari/Webkit.

  

  Kompatibilnost

  Kao što ste možda pretpostavili, glavni izvor problema s kompatibilnošću je Internet Explorer:

  • Element #floater mora biti postavljen na širinu
  • Dodatni dopuni oko menija u IE 6

  237152 pregleda

  Dobar dan, pretplatnici i čitaoci ove publikacije. Danas želim da uđem u detalje i da vam kažem kako da centrirate tekst u css-u. U nekim prethodnim člancima sam se indirektno dotakao ove teme, tako da imate neko znanje iz ove oblasti.

  Međutim, u ovom postu ću vam reći o svim vrstama načina za poravnavanje objekata, kao i objasniti kako uvući i crvenim crtama pasusa. Pa počnimo da učimo!

  Html i njegovo potomstvo i poravnajte

  Ova metoda se gotovo nikada ne koristi, jer je zamijenjena kaskadnim alatima za listove stilova. Međutim, saznanje da takva oznaka postoji neće vam škoditi.

  Što se tiče validacije (ovaj termin je detaljno opisan u članku ""), sama html specifikacija osuđuje upotrebu < centar>, pošto je za valjanost potrebno koristiti tranzitiv DOCTYPE>.

  Ovaj tippreskače zabranjene elemente.

  Sada pređimo na atribut poravnati. Postavlja horizontalno poravnanje objekata i uklapa se nakon deklaracije oznake. Obično se može koristiti za poravnavanje sadržaja na lijevo ( lijevo), na desnoj strani ( u pravu), centriran ( centar) i širinu teksta ( opravdati).

  U nastavku ću dati primjer u kojem ću postaviti sliku i pasus u centar.

  Ovaj sadržaj će biti centriran.

  Imajte na umu da za sliku atribut koji analiziramo ima nešto drugačije vrijednosti.

  U primjeru koji sam koristio poravnati="sredina". Zahvaljujući tome, slika je poravnata tako da se rečenica nalazi tačno na sredini slike.

  CSS alati za centriranje

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

  Dakle, počnimo s prvim svojstvom centriranja teksta - ovo je tekst-poravnati.

  Funkcionira isto kao i align in . Među ključnim riječima možete odabrati jednu sa opće liste ili naslijediti karakteristike pretka ( nasljediti).

  Želim napomenuti da u css3 možete postaviti još 2 parametra: start– u zavisnosti od pravila pisanja teksta (s desna na lijevo ili obrnuto), postavlja poravnanje lijevo ili desno (slično kao što radi lijevo ili desno) i kraj- suprotno od početka (pri pisanju teksta s lijeva na desno djeluje kao desno, kada se piše s desna na lijevo - lijevo).

  Ponuda sa desne strane

  Rečenica koja koristi kraj

  Dozvolite mi da vam kažem o malom triku. Prilikom odabira vrijednosti opravdati posljednji red može ružno visiti odozdo. Da biste ga, na primjer, smjestili u centar, možete koristiti nekretninu text-align-last.

  Da biste vertikalno poravnali sadržaj stranice ili ćelije tablice, koristite svojstvo vertikalno poravnanje. 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 objekat pretka nema takvu liniju, onda se poravnanje događa duž donje granice.
  srednji	Sredina promjenjivog objekta je poravnata s osnovnom linijom, kojoj se dodaje visina poda roditeljskog elementa.
  dnu	Dno odabranog sadržaja prilagođava se dnu objekta ispod svega.
  top	Slično dnu, samo sa vrhom objekta.
  Super	Pravi superskript znaka.
  sub	Pravi subscript element.

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

  C IN E TOTO

  C IN E TOTO

  Udubljenje

  I konačno, stigli smo do uvlačenja u paragrafu. CSS jezik koristi posebno svojstvo tzv uvlačenje teksta.

  Pomoću njega možete napraviti i crvenu liniju i izbočinu (morate navesti negativnu vrijednost).

  Da biste kreirali crvenu liniju, morate znati samo jedan parametar.

  To je jednostavno svojstvo uvlačenja teksta.

  Vrlo često u rasporedu je potrebno centrirati neki element horizontalno i/ili okomito. Stoga sam odlučio napraviti članak sa raznim metodama centriranja, tako da sve bude pri ruci na jednom mjestu.

  Horizontalno poravnanje

  margina: auto

  Horizontalno poravnanje sa marginom se koristi kada je poznata širina centralnog elementa. Radi za blok elemente:

  Elem ( margina-lijevo: auto; margin-desno: auto; širina: 50%; )

  Navođenje automatske vrijednosti desnog i lijevog dopuna čini ih jednakim, što centrira element horizontalno unutar roditeljskog bloka.

  text-align: centar

  Ova metoda je prikladna za centriranje teksta unutar bloka. text-align: centar:

  Ja sam centriran

  pozicija i negativna margina lijevo

  Pogodno za centrirane blokove poznate širine. Roditeljski blok postavljamo na poziciju: relativno u odnosu na nju, centralni element na poziciju: apsolutnu, lijevo: 50% i negativnu marginu-left, čija je vrijednost jednaka polovini širine elementa:

  Ja sam centriran

  prikaz: inline-block + text-align: centar

  Metoda je prikladna za poravnavanje blokova nepoznate širine, ali zahtijeva roditeljski omotač. Na primjer, ovako možete centrirati horizontalni meni:

  • Dom
  • o autoru

  Vertikalno poravnanje

  visina linije

  Da biste poravnali jedan red teksta, možete koristiti iste vrijednosti visine i razmaka za roditeljski blok. Pogodno za dugmad, stavke menija itd.

  Ja sam vertikalno poravnat

  pozicija i negativna marža gore

  Element se može vertikalno poravnati dajući mu fiksnu visinu i položaj primjene: apsolutna i negativna margina jednaka polovini visine elementa koji se poravnava. Roditeljskom bloku treba dati poziciju: relativno:

  Omot (pozicija: relativna; ) elem (visina: 200px; margina: -100px 0 0; pozicija: apsolutna; vrh: 50%; )

  Tako, koristeći pozicioniranje i negativne margine, možete centrirati element na stranici.

  displej: ćelija tabele

  Za vertikalno poravnanje, svojstvo display: table-cell se primenjuje na element, što ga čini da emulira ćeliju tabele. Također postavljamo visinu i vertikalno poravnanje: sredinu na nju. Sve ćemo ovo umotati u kontejner sa svojstvom dislpay: table; :

  Ja sam vertikalno poravnat

  Dinamički poravnajte element na stranici

  Pogledali smo načine za poravnavanje elemenata na stranici pomoću CSS-a. Pogledajmo sada jQuery implementaciju.

  Dodajmo jQuery na stranicu:

  Predlažem da napišete jednostavnu funkciju za centriranje elementa na stranici, nazovimo je alignCenter() . Sam element djeluje kao argument funkciji:

  Funkcija alignCenter(elem) ( // kod ovdje)

  U tijelu funkcije, dinamički izračunajte i dodijelite koordinate centra stranice lijevom i gornjem CSS svojstvu:

  Funkcija alignCenter(elem) ( elem.css(( lijevo: ($(window).width() - elem.width()) / 2 + "px", gore: ($(window).height() - elem. height()) / 2 + "px" // ne zaboravite dodati position: absolute elementu da pokrene koordinate )) )

  U prvom redu funkcije dobivamo širinu dokumenta i oduzimamo od nje širinu elementa, podijeljenu na pola - to će biti horizontalni centar stranice. Druga linija radi isto, samo sa visinom da se poravna okomito.

  Funkcija je spremna, ostaje je objesiti na događaje spremnosti DOM-a i promjene veličine prozora:

  $(function() ( // pozovite funkciju centriranja kada je DOM spreman alignCenter($(elem)); // pozovite funkciju kada se promijeni veličina prozora $(window).resize(function() ( alignCenter($( elem)); )) // funkcija centriranja elementa funkcija funkcija alignCenter(elem) ( elem.css(( // izračunavanje lijeve i gornje koordinate lijevo: ($(window).width() - elem.width()) / 2 + "px", gore: ($(window).height() - elem.height()) / 2 + "px" ))) ) ))

  Primjena Flexboxa

  Postepeno, nove karakteristike CSS3, kao što je Flexbox, postaju uobičajene. Tehnologija pomaže u stvaranju oznaka bez upotrebe plutajućih, pozicioniranja itd. Može se koristiti i za centriranje elemenata. Na primjer, primijenimo Flexbox na roditeljski .wrapper element i centriramo sadržaj unutar:

  Omotač ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; visina: 500px; širina: 500px; ) .wrapper .content ( margin: auto; /* margina: 0 auto; samo horizontalno */ /* margina: auto 0; samo okomito */ )

  Lorem ipsum dolor sit amet

  Ovo pravilo istovremeno centrira element horizontalno i okomito - margina sada radi ne samo za horizontalno, već i za vertikalno poravnanje. I bez poznate širine/visine.

  Related Resources

  Pomozite projektu

  Prilikom postavljanja stranice, često je potrebno izvršiti centralno poravnanje na CSS način: na primjer, centrirati glavni blok. Postoji nekoliko opcija za rješavanje ovog problema, od kojih svaki prije ili kasnije mora koristiti bilo koji layout dizajner.

  Centralno poravnanje teksta

  Često, u dekorativne svrhe, potrebno je postaviti poravnanje teksta u centar, CSS u ovom slučaju vam omogućava da smanjite vrijeme izgleda. Ranije se to radilo pomoću HTML atributa, ali sada standard zahtijeva da se tekst poravna pomoću stilskih tablica. Za razliku od blokova, kojima je potrebno promijeniti margine, u CSS-u se poravnavanje teksta centrira pomoću jednog reda:

  • text-align:center;

  Ovo svojstvo se nasljeđuje i prenosi sa roditelja na svu djecu. Utječe ne samo na tekst, već i na druge elemente. Da biste to učinili, moraju biti inline (na primjer, span) ili inline-block (bilo koji blokovi koji imaju postavljeno svojstvo display: block). Posljednja opcija također vam omogućava promjenu širine i visine elementa, fleksibilnije podešavanje uvlaka.

  Često na stranicama, align se pripisuje samoj oznaci. Ovo odmah čini kod nevažećim, jer je W3C zastario atribut align. Ne preporučuje se korištenje na stranici.

  Poravnavanje bloka prema sredini

  Ako trebate centrirati div, CSS ima prilično zgodan način: korištenje margina. Uvlake se mogu postaviti i za blok elemente i za inline-blok elemente. Vrijednost svojstva mora imati vrijednosti 0 (vertikalne uvlake) i auto (automatske horizontalne uvlake):

  • margin:0 auto;

  Sada je ova opcija prepoznata kao apsolutno važeća. Korištenje margina također vam omogućava da postavite poravnanje slike prema sredini: to vam omogućava da riješite mnoge probleme povezane sa pozicioniranjem elementa na stranici.

  

  Poravnajte blok lijevo ili desno

  Ponekad CSS centralno poravnanje nije potrebno, ali morate staviti dva bloka jedan pored drugog: jedan na levu stranu, drugi na desnu. Da biste to učinili, postoji svojstvo float, koje može imati jednu od tri vrijednosti: lijevo, desno ili nijedna. Recimo da imate dva bloka koja treba postaviti jedan pored drugog. Tada će kod biti ovakav:

  • .left (float:left;)
  • .desno (float:desno)

  Ako postoji i treći blok, koji bi trebao biti lociran ispod prva dva bloka (na primjer, podnožje), tada treba postaviti svojstvo clear:

  • .left (float:left;)
  • .desno (float:desno)
  • podnožje (jasno: oba)

  Činjenica je da blokovi sa klasama lijevo i desno ispadaju iz opšteg toka, odnosno svi ostali elementi zanemaruju samo postojanje poravnatih elemenata. Svojstvo clear:both omogućava podnožju ili bilo kojem drugom bloku da vidi elemente koji su ispali iz toka i onemogućuje premotavanje (float) i lijevo i desno. Stoga će se u našem primjeru podnožje pomjeriti prema dolje.

  Vertikalno poravnanje

  Postoje slučajevi kada nije dovoljno postaviti centralno poravnanje na CSS načine, potrebno je i promijeniti vertikalnu poziciju podređenog bloka. Bilo koji inline ili inline-blok element može biti poravnat s gornjom ili donjom ivicom, biti u sredini roditeljskog elementa ili biti u proizvoljnom položaju. Najčešće, blok treba biti centriran, za to se koristi atribut vertical-align. Recimo da postoje dva bloka, jedan ugniježđen u drugi. U ovom slučaju, unutrašnji blok je inline-block element (prikaz: inline-block). Morate poravnati dječji blok okomito:

  • gornje poravnanje - .child(vertical-align:top);
  • centralno poravnanje - .child(vertical-align:middle);
  • donje poravnanje - .child(vertical-align:bottom);

  Na elemente na nivou bloka ne utiče text-align ili vertical-align.

  

  Mogući problemi sa poravnatim blokovima

  Ponekad centriranje diva na CSS način može uzrokovati male probleme. Na primjer, kada koristite float: recimo da postoje tri bloka: .first, .second i .third. Drugi i treći blok leže u prvom. Element sa klasom second je poravnat lijevo, a posljednji blok je poravnat udesno. Nakon poravnanja, oba su ispala iz toka. Ako roditeljski element nema postavljenu visinu (na primjer, 30em), tada se više neće protezati do visine podređenih blokova. Da bi izbjegli ovu grešku, koriste "spacer" - poseban blok koji vidi .second i .third. CSS kod:

  • .second (float:left)
  • .third (float:desno)
  • .clearfix(visina:0; jasno: oba;)

  Često se koristi pseudo-klasa :after, koja vam takođe omogućava da vratite blokove na svoje mesto kreiranjem pseudo odstojnika (u primeru, div sa klasom kontejnera leži unutar .first i sadrži .left i .right):

  • .left(float:left)
  • .desno (float:desno)
  • .container:after(content:""; display:table; clear:oth;)

  Gore navedene opcije su najčešće, iako postoji nekoliko varijacija. Uvek možete pronaći najlakši i najpogodniji način da napravite pseudo odstojnik kroz eksperimentisanje.

  Još jedan problem sa kojim se dizajneri rasporeda često suočavaju je poravnanje inline-blok elemenata. Nakon svakog od njih automatski se dodaje razmak. Svojstvo margine, koje je postavljeno na negativnu marginu, pomaže da se nosi sa ovim. Postoje i drugi načini koji se koriste mnogo rjeđe: na primjer, nuliranje U ovom slučaju, font-size:0 je upisan u svojstva roditeljskog elementa. Ako unutar blokova postoji tekst, tada je potrebna veličina fonta već vraćena u svojstvima elemenata inline-bloka. Na primjer, veličina fonta:1em. Metoda nije uvijek prikladna, pa se mnogo češće koristi opcija s vanjskim uvlakama.

  

  Poravnavanje blokova omogućava vam da kreirate prekrasne i funkcionalne stranice: ovo je izgled općeg izgleda, lokacija robe u internetskim trgovinama i fotografije na web stranici vizitkarte.