način prikaza kao tablica, nakon toga možemo koristiti svojstvo vertikalnog poravnanja (koje radi različito na različitim elementima).

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

profesionalci

• 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 nižim
• Puno ugniježđenih oznaka

2. metoda

Ova metoda koristi apsolutno pozicioniranje diva, čiji je vrh postavljen na 50%, a njegova gornja margina (margin-top) minus pola visine sadržaja. To podrazumijeva da objekt mora imati fiksnu visinu, koja je definirana u CSS stilovima.

Budući da je visina fiksna, možete postaviti overflow:auto; za div koji sadrži sadržaj, pa ako sadržaj ne stane, pojavit će se trake za pomicanje.

#sadržaj ( položaj: apsolutni; vrh: 50%; visina: 240 px; margin-top: -120 px; /* minus pola visine */ )

profesionalci

• Radi u svim preglednicima.
• Bez dodatnih ulaganja.

minusi

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

3. metoda

U ovoj metodi, omotat ćemo div sadržaja s drugim divom. Postavite visinu na 50% (height: 50%;), a donju marginu na polovicu visine (margin-bottom:-contentheight;). Sadržaj će očistiti lebdenje i biti centriran.

#floater( float: lijevo; visina: 50%; margin-bottom: -120px; ) #content( jasno: oboje; visina: 240px; pozicija: relativno; )

profesionalci

• Radi u svim preglednicima.
• Kada nema dovoljno prostora (npr. kada je prozor smanjen) sadržaj nije odrezan, pojavit će se klizači.

minusi

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

4. metoda.

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

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

profesionalci

• Jako jednostavno.

minusi

• Ne radi u Internet Exploreru
• Sadržaj će se izrezati bez klizača ako u spremniku nema dovoljno prostora.

5. metoda

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

#sadržaj (visina: 100 px; visina linije: 100 px; )

profesionalci

• Radi u svim preglednicima.
• Ne reže tekst ako ne stane.

minusi

• Radi samo s tekstom (ne radi s blok elementima).
• Ako ima više od jednog retka teksta, izgleda jako loše.

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

Sada kada znate kako postići okomito središnje poravnanje, napravimo jednostavnu web stranicu koja će na kraju izgledati ovako:

Korak 1

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

• #floater (za centriranje sadržaja)
• #centred (središnji element)
  • #strana
    • #logo
    • #nav (popis
    • #sadržaj
  • #dno (za autorska prava i sve ostalo)

  Napišimo sljedeće html oznake:

  Poduzeće

  • Dom
  • Proizvodi
  • Blog
  • kontakt
  • Oko

  Naslov stranice

  Holistički reinženjering outsourcinga s dodanom vrijednošću nakon suradnje usmjerene na proces i dijeljenja ideja. Energetski pojednostavite utjecajne tržišne niše putem omogućenih imperativa. Holistički prevladavaju vrhunske inovacije nakon uvjerljivih scenarija. Neometano rekapitulirajte visoke standarde u ljudskom kapitalu s vodećim proizvedenim proizvodima. Izrazito udružite sheme usklađene sa standardima prije robusnih vortala. Jedinstveno rekapitulirajte iskorištenu web-spremnost u odnosu na informacije izvan okvira.

  Naslov 2

  Učinkovito prihvatite prilagođenu web-spremnost umjesto procesa usmjerenih prema korisniku. Asertivno razvijajte međuplatformske imperative naspram proaktivnih tehnologija. Prikladno osnažite multidisciplinarne meta-usluge bez sučelja za cijelo poduzeće. Prikladno usmjerite konkurentna strateška tematska područja s fokusiranim e-tržištima. Fosfluorescentno udružite zajednice svjetske klase u odnosu na tržišta s dodanom vrijednošću. Na odgovarajući način izmislite holističke usluge prije robusnih e-usluga.

  Obavijest o autorskim pravima ide ovdje

  Korak 2

  Sada ćemo napisati najjednostavniji CSS za postavljanje elemenata na stranicu. Trebali biste spremiti ovaj kod u datoteku style.css. Na njemu je veza ispisana u html datoteci.

  Html, tijelo (margina: 0; ispuna: 0; visina: 100%; ) tijelo (pozadina: url("page_bg.jpg") 50% 50% bez ponavljanja #FC3; obitelj-fontova: Georgia, Times, serifi; ) #floater ( položaj: relativan; float: lijevo; visina: 50%; margin-bottom: -200px; širina: 1px; ) #centered ( položaj: relativan; jasno: lijevo; visina: 400px; širina: 80%; maks. -width: 800px; min-width: 400px; margin: 0 auto; background: #fff; border: 4px solid #666; ) #bottom (position: absolute; bottom: 0; right: 0; ) #nav ( position: apsolutno; lijevo: 0; vrh: 0; dno: 0; desno: 70%; padding: 20px; margina: 10px; ) #sadržaj ( pozicija: apsolutno; lijevo: 30%; desno: 0; vrh: 0; dno: 0; overflow: auto; visina: 340px; padding: 20px; margina: 10px; )

  Prije nego što svoj sadržaj možemo srediti, moramo postaviti visinu tijela i html-a na 100%. Budući da se visina smatra bez unutarnjeg i vanjskog ispuna (padding i margina), postavili smo ih (padding) na 0 tako da nema klizača.

  Donja ispuna za "floater" element je minus pola visine sadržaja (400px), odnosno -200px;

  Vaša bi stranica sada trebala izgledati otprilike ovako:

  

  Širina #centered elementa je 80%. To našu stranicu čini užom na malim ekranima, a širim na većim. većina stranica izgleda ružno na novim širokim monitorima u gornjem lijevom kutu. 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.

  Budući da 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 za uklapanje.

  3. korak

  I posljednja stvar koju ćemo učiniti jest dodati malo stila kako bi stranica izgledala malo privlačnije. Krenimo od jelovnika.

  #nav ul ( list-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0; ) #nav li ( padding: 0; margin: 3px; ) #nav li a ( display: block; boja pozadine: #e8e8e8; padding: 7px; margina: 0; text-decoration: none; color: #000; border-bottom: 1px solid #bbb; text-align: right; ) #nav li a::after ( sadržaj: """; boja: #aaa; težina fonta: podebljano; prikaz: umetnuto; plutajuće: 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 ( margina: 0 0 0 7px; boja: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )

  Prva stvar koju smo učinili kako bi izbornik izgledao bolje bilo je uklanjanje grafičkih oznaka postavljanjem atributa list-style:none, a također smo postavili ispunu i ispunu, budući da se zadane vrijednosti uvelike razlikuju među preglednicima.

  Imajte na umu da smo tada odredili da veze trebaju biti prikazane kao elementi na razini bloka. Sada kada su prikazani razvučeni su cijelom širinom elementa u kojem se nalaze.

  Još jedna zanimljiva stvar koju smo koristili za izbornike su pseudoklase :before i :after. Omogućuju vam da dodate nešto prije i poslije elementa. Ovo je dobar način za dodavanje ikona ili simbola poput strelice na kraju svake veze. Ovaj trik ne radi u Internet Exploreru 7 i starijim.

  

  Korak 4

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

  #centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 (font-family: Helvetica, Arial, sans- serif; težina fonta: normalna; boja: #666; ) h1 (boja: #f93; rub-bottom: 1px solid #ddd; prored-slova: -0.05em; font-weight: bold; margin-top: 0; padding-top: 0; ) #bottom (padding: 10px; font-size: 0.7em; color: #f03; ) #logo (font-size: 2em; text-align: center; color: #999; ) #logo jak (težina fonta: normalno;) #logo span (zaslon: blok; veličina fonta: 4em; visina linije: 0,7em; boja: #666; ) p, h2, h3 (visina linije: 1,6em;) a (boja: #f03; )

  U ovim stilovima postavljamo zaobljene kutove za #centered element. U CSS3, to će biti riješeno svojstvom border-radius. Ovo još nije implementirano u nekim preglednicima, osim za korištenje prefiksa -moz i -webkit za Mozilla Firefox i Safari/Webkit.

  

  Kompatibilnost

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

  • Element #floater mora biti postavljen na širinu
  • Dodatna podloga oko izbornika u IE 6

  237152 pogleda

  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 ovom ću vam postu reći o svim vrstama načina poravnavanja objekata, kao i objasniti kako uvući i uvući odlomke. Pa počnimo učiti!

  Html i njegovi potomci i poravnati

  Ova se metoda gotovo nikad ne koristi jer su je istisnuli alati kaskadnih stilskih listova. 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 tranzitiv DOCTYPE>.

  Ovaj tippreskače zabranjene elemente.

  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), na desnoj strani ( pravo), centrirano ( centar) i širina 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 nešto drugačije vrijednosti.

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

  CSS alati za centriranje

  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.

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

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

  Želim 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 (kada pišete tekst slijeva nadesno, ponaša se kao desna, kada pišete s desna nalijevo - lijevo).

  Ponuda desno

  Rečenica s krajem

  Reći ću vam jedan mali trik. Prilikom odabira vrijednosti opravdati posljednji red može ružno visjeti odozdo. Da biste ga smjestili, na primjer, 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 promjenjivog objekta poravnata je s osnovnom linijom, kojoj se dodaje visina nadređenog elementa.
  dno	Dno odabranog sadržaja prilagođava se dnu objekta ispod svega.
  vrh	Slično dnu, samo s vrhom objekta.
  super	Stvara ekspresni znak.
  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 NA E TODo

  C NA E TODo

  Uvlačenje

  I konačno, došli smo do uvlačenja u odlomku. Jezik css koristi posebno svojstvo tzv uvlaka teksta.

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

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

  To je jednostavno svojstvo uvlačenja teksta.

  Vrlo često u layoutu je potrebno centrirati neki element vodoravno i/ili okomito. Stoga sam odlučio napraviti članak s raznim načinima centriranja, kako bi sve bilo pri ruci na jednom mjestu.

  Horizontalno poravnanje

  margina: auto

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

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

  Određivanje automatske vrijednosti desnog i lijevog ispuna čini ih jednakima, što centrira element vodoravno unutar nadređenog bloka.

  poravnanje teksta: središte

  Ova metoda je prikladna za centriranje teksta unutar bloka. poravnanje teksta: centar:

  Poravnan sam po sredini

  poziciju i negativnu marginu lijevo

  Prikladno za centrirane blokove poznate širine. Postavljamo nadređeni blok na položaj: relativno na položaj u odnosu na njega, središnji element na položaj: apsolutni, lijevo: 50% i negativnu marginu-lijevo, čija je vrijednost jednaka polovici širine elementa:

  Poravnan sam po sredini

  prikaz: inline-block + text-align: center

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

  • Dom
  • o autoru

  Okomito poravnanje

  linija-visina

  Da biste poravnali jedan redak teksta, možete koristiti iste vrijednosti visine i proreda za nadređeni blok. Prikladno za gumbe, stavke izbornika itd.

  Okomito sam poravnat

  pozicija i negativna margina gore

  Element se može okomito poravnati tako da mu se zada fiksna visina i primijeni položaj: apsolutna i negativna margina prema gore jednaka polovici visine elementa koji se poravnava. Nadređenom bloku treba dati položaj: relativno:

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

  Dakle, pomoću pozicioniranja i negativnih margina, možete centrirati element na stranici.

  prikaz: tablica-ćelija

  Za okomito poravnanje, svojstvo display: table-cell primjenjuje se na element, što ga čini oponašanjem ćelije tablice. Također smo postavili visinu i okomito poravnajte: sredinu prema njoj. Sve ćemo to zamotati u spremnik sa svojstvom dislpay: table; :

  Okomito sam poravnat

  Dinamički poravnajte element na stranici

  Proučili smo načine za poravnavanje elemenata na stranici pomoću CSS-a. Sada pogledajmo implementaciju jQueryja.

  Dodajmo jQuery na stranicu:

  Predlažem pisanje jednostavne funkcije za centriranje elementa na stranici, nazovimo je alignCenter() . Sam element djeluje kao argument funkcije:

  Funkcija alignCenter(elem) ( // kodirajte ovdje )

  U tijelu funkcije dinamički izračunajte i dodijelite koordinate središta stranice lijevom i gornjem CSS svojstvu:

  Funkcija alignCenter(elem) ( elem.css(( lijevo: ($(window).width() - elem.width()) / 2 + "px", gore: ($(window).height() - elem. visina()) / 2 + "px" // ne zaboravite dodati position: absolute elementu za pokretanje koordinata )) )

  U prvom retku funkcije dobivamo širinu dokumenta i od njega oduzimamo širinu elementa, podijeljenu na pola - to će biti vodoravno središte stranice. Drugi red radi isto, samo s visinom za okomito poravnanje.

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

  $(function() ( // poziva funkciju za centriranje kada je DOM spreman alignCenter($(elem)); // poziva funkciju kada se promijeni veličina prozora $(window).resize(function() ( alignCenter($( elem)); )) // funkcija za centriranje elementa function alignCenter(elem) ( elem.css(( // izračunavanje lijevih i gornjih koordinata lijevo: ($(window).width() - elem.width()) / 2 + "px", gore: ($(window).height() - elem.height()) / 2 + "px" ))) ) ))

  Primjena Flexboxa

  Nove značajke CSS3 kao što je Flexbox polako ulaze u mainstream. Tehnologija pomaže u stvaranju oznaka bez upotrebe plutajućih oznaka, pozicioniranja itd. Također se može koristiti za centriranje elemenata. Na primjer, primijenimo Flexbox na roditeljski element .wrapper i sredimo sadržaj unutra:

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

  Lorem ipsum dolor sit amet

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

  Povezani resursi

  Pomozite projektu

  Kada postavljate stranicu, često je potrebno izvršiti središnje poravnanje na CSS način: na primjer, središte glavnog bloka. Postoji nekoliko opcija za rješavanje ovog problema, od kojih svaki prije ili kasnije mora koristiti bilo koji dizajner izgleda.

  Središnje poravnanje teksta

  Često, u dekorativne svrhe, želite postaviti poravnanje teksta u središte, CSS vam u ovom slučaju omogućuje smanjenje vremena izgleda. Prethodno se to radilo pomoću HTML atributa, ali sada standard zahtijeva da se tekst poravna pomoću listova stilova. Za razliku od blokova, koji trebaju promijeniti margine, u CSS-u, poravnanje teksta je centrirano s jednom linijom:

  • poravnanje teksta: središte;

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

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

  Poravnanje bloka prema sredini

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

  • margina:0 auto;

  Sada je ova opcija prepoznata kao apsolutno važeća. Korištenje margina također vam omogućuje postavljanje poravnanja slike prema sredini: omogućuje vam rješavanje mnogih problema povezanih s pozicioniranjem elementa na stranici.

  

  Poravnajte blok lijevo ili desno

  Ponekad nije potrebno centriranje na CSS način, ali trebate staviti dva bloka jedan pored drugog: jedan na lijevi rub, drugi na desni. Da biste to učinili, postoji svojstvo float, koje može uzeti jednu od tri vrijednosti: lijevo, desno ili ništa. Recimo da imate dva bloka koja treba postaviti jedan pored drugog. Tada će kod biti ovakav:

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

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

  • .lijevo (float:lijevo;)
  • .desno(float:desno)
  • podnožje (jasno: oboje)

  Činjenica je da blokovi s klasama lijevo i desno ispadaju iz općeg toka, odnosno svi ostali elementi ignoriraju samo postojanje poravnatih elemenata. Svojstvo clear:both dopušta podnožju ili bilo kojem drugom bloku da vidi elemente koji su ispali iz toka i onemogućuje omatanje (lebdjenje) i lijevo i desno. Stoga će se u našem primjeru podnožje pomaknuti prema dolje.

  Okomito poravnanje

  Postoje slučajevi kada nije dovoljno postaviti središnje poravnanje na CSS načine, potrebno je promijeniti i okomiti položaj podređenog bloka. Bilo koji inline ili inline-block element može biti poravnat s vrhom ili dnom, biti u sredini nadređenog elementa ili biti u bilo kojem položaju. Najčešće blok treba centrirati, što se radi pomoću atributa vertical-align. Recimo da postoje dva bloka, jedan ugniježđen u drugom. U ovom slučaju, unutarnji blok je inline-block element (prikaz: inline-block). Morate okomito poravnati dječji blok:

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

  Elementi na razini bloka nisu pod utjecajem poravnanja teksta ili okomitog poravnanja.

  

  Mogući problemi s poravnatim blokovima

  Ponekad centriranje diva na CSS način može izazvati 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 s drugom klasom poravnat je lijevo, a posljednji blok desno. Nakon poravnanja oba su ispala iz potoka. Ako nadređeni element nema postavljenu visinu (na primjer, 30em), tada se više neće rastezati do visine podređenih blokova. Kako bi izbjegli ovu pogrešku, koriste "razmaknicu" - poseban blok koji vidi .second i .third. CSS kôd:

  • .drugo(float:lijevo)
  • .treći (float:desno)
  • .clearfix(visina:0; jasno: oboje;)

  Često se koristi pseudo-klasa :after, koja vam također omogućuje vraćanje blokova na mjesto stvaranjem pseudo razmaknice (u primjeru, div s klasom spremnika nalazi se unutar .first i sadrži .left i .right):

  • .lijevo(float:lijevo)
  • .desno(float:desno)
  • .container:after(content:""; display:table; clear:both;)

  Gore navedene opcije su najčešće, iako postoji nekoliko varijacija. Eksperimentiranjem uvijek možete pronaći najlakši i najprikladniji način za stvaranje pseudo odstojnika.

  Još jedan problem s kojim se dizajneri izgleda često susreću je poravnanje inline-block elemenata. Nakon svakog od njih automatski se dodaje razmak. Svojstvo margine, koje je postavljeno na negativnu marginu, pomaže u rješavanju ovoga. Postoje i drugi načini koji se koriste puno rjeđe: na primjer, nuliranje U ovom slučaju, font-size:0 je napisano u svojstvima nadređenog elementa. Ako postoji tekst unutar blokova, tada je potrebna veličina fonta već vraćena u svojstvima elemenata umetnutog bloka. Na primjer, font-size:1em. Metoda nije uvijek prikladna, pa se mnogo češće koristi opcija s vanjskim uvlakama.

  

  Poravnavanje blokova omogućuje vam stvaranje lijepih i funkcionalnih stranica: ovo je izgled općeg izgleda, lokacija robe u internetskim trgovinama i fotografije na web mjestu posjetnice.