Centrirano: CSS-izgleda

Kad je izgled stranice često je potrebno napraviti usmjeren CSS-način: na primjer, za centriranje glavnu jedinicu. Postoji nekoliko rješenja ovog problema, od kojih svaka će prije ili kasnije morati koristiti bilo koji koder.

Poravnanje teksta u središte

Često za ukrasne svrhe želite postaviti tekst usmjeren, CSS u ovom slučaju, da se smanji vrijeme nametanja. Prije je to bilo učinjeno pomoću HTML-atribute, ali sada standardni potrebno uskladiti tekst sa stilom list. Za razliku od bloka za koji želite promijeniti vanjsku padding u CSS poravnanje teksta u sredini je napravljen s jednog retka:

• text-align: center;

Ova nekretnina je naslijedio i prošao s roditelja na svu djecu. To utječe ne samo tekst nego i na druge elemente. U tu svrhu, oni bi trebali biti mala slova (npr vijek) ili red-blok (bilo koji blokira da navedete imovinu display: block). Druga opcija također omogućuje promjenu širinu i visinu elementa, fleksibilnije konfiguraciju uvalu.

stranice često align atribut u sebi oznaku. To se odmah čini kod nevažeći, jer W3C priznao align atribut zastario. Koristeći ga na stranici ne preporučuje.

Centrirano blok

Ako želite postaviti poravnanje div u sredini, CSS može ponuditi prilično udoban način: korištenje vanjskog padding marže. Padding može biti navedena kao blok elemenata i line-blok. Svoysva vrijednost treba biti 0 (vertikalna padding), i auto (automatsko uvlačenje vodoravno):

• margin: 0 auto;

Sada ova opcija je priznat kao apsolutno vrijedi. Korištenje vanjskog padding također vam omogućuje da postavite usklađivanje centra: CSS-margin svojstvo omogućuje nam da riješiti mnoge probleme povezane s pozicioniranje elemenata na stranici.

Usklađivanje lijevom ili desnom rubu bloka

Ponekad CSS-način ne zahtijeva usklađivanje sredini, ali je potrebno staviti u sljedeća dva bloka, jedan s lijeve strane, a drugi - s desne strane. Za to postoji plovak imovine, koja može biti u jednom od tri vrijednosti: lijevo, desno ili ništa. Recimo da imate dva bloka koji bi trebali biti postavljeni jedan do drugoga. Tada kod je kako slijedi:

• .left {float: lijevo;}
• .right {float: desno}

Ako postoji i treći blok, koji mora biti smješten u prva dva bloka (na primjer, podnožje), tada je potrebno da se registrirate jasnu funkciju:

• .left {float: lijevo;}
• .right {float: desno}
• Podnožje {jasna: i}

Činjenica da su blokovi s klasama lijeve i desne pad od ukupnog toka, to jest, svi ostali elementi zanemareni samo postojanje elemenata usklađenih. Nekretnine jasna: kako vam podnožje blok ili bilo koje druge vidljive taloži iz stanica protoka i zabranjuje folijom (float) na obje lijeve i desne strane. Dakle, u našem primjeru, podnožje je pomaknuta prema dolje.

okomito poravnanje

Postoje slučajevi u kojima nije dovoljno za postavljanje poravnanje središtu CSS-načine, morate promijeniti vertikalnu poziciju bloka djeteta. Svaka linija ili red-blok element može biti prislonjen uz gornji ili donji rub, koji se nalazi u sredini matičnog elementa ili biti u proizvoljnog mjesta. Najčešće zahtijevaju usklađivanje sredini bloka, koristi vertikalna-align atribut. Pretpostavimo da postoje dva bloka, jedan umetnut u drugu. U ovom unutarnje jedinice - red-blok elemenata (display: inline-blok). Potrebno je uskladiti vertikalni blok dijete:

• poravnavanje gornje granice - {.child vertikalno poravnanje: top};
• usmjeren - {.child vertikalno poravnanje: srednji};
• Sravnjenje donjem rubu - {.child okomito poravnati: dno};

U blok elemenata zvuka text-align ili vertikalna-align ne primjenjuje.

Mogući problemi s poravnatih jedinica

Ponekad div align središte CSS-način može izazvati malo problema. Na primjer, kada se koristi plovak: na primjer, postoje tri bloka: Prvo je, .second i .third. Drugi i treći blokovi leže u prvom. Element s klasi drugi lijevo poravnat, a posljednji blok - na desnoj strani. Nakon usklađivanja dvoje pala iz potoka. Ako roditelj element ne definira visinu (npr 30em), ona će prestati da se protežu na visinu od pomoćnih jedinica. Da bi izbjegli tu pogrešku, koristite „spacer” - posebnu jedinicu koja vidi .second i .third. CSS-kod:

• .second {float: left}
• .third {float: desno}
• .clearfix {visina: 0; jasna: i;}

pseudo često koristi: nakon što također omogućava da se vrate blokove na mjesto stvaranja psevdorasporki (u ovom primjeru u divu s klase leži unutar spremnika i obuhvaća Prvo je .left i .right):

• .left {float: left}
• .right {float: desno}
• .container: nakon {sadržaj: ''; Prikaz: tablice; jasna: i;}

Navedene opcije - najčešći, iako postoje neke razlike. Uvijek možete pronaći najlakši i najpovoljniji način za stvaranje psevdorasporki pokusima.

Drugi problem često izgleda - usklađivanje linija blok elemenata. Nakon svakog od njih prostor automatski dodaje. Ručka pomaže margini imovinu, koji je definiran negativnog uvalu. Postoje i drugi načini, koji se koriste rjeđe, na primjer, može resetirati veličinu fonta. U tom slučaju, svojstva matične elementa registrira font-size: 0. Ako se unutar blokova teksta, svojstva linija blok elemenata su se vratili na željenu veličinu fonta. Na primjer, font-size: 1em. Metoda nije uvijek praktično, tako da je mnogo češće koristi verziju s vanjskim rubovima.

Usklađivanje blokova omogućuje stvaranje lijepe i funkcionalne stranice: opći izgled i izgled i položaj robe u trgovinama i fotografije na stranici mali.