Centered: CSS-raspored

Kada je često potrebno izgled stranice napraviti centriran CSS-način: na primjer, ubaciti glavnoj jedinici. Postoji nekoliko rješenja ovog problema, od kojih svaka će prije ili kasnije morati da koriste bilo kodera.

Poravnajte tekst do centra

Često u dekorativne svrhe želite da postavite tekst centriran, CSS u ovom slučaju, da se smanji vrijeme izricanja. Ranije je to učiniti pomoću HTML-atributa, ali sada je standard zahtijeva da uskladi tekst sa stila. Za razliku od bloka za koji želite promijeniti vanjski postava u CSS poravnanje teksta u sredini je napravljen od jedne linije:

• text-align: centar;

Ova nekretnina se nasljeđuje i prošlo od roditelja za svu djecu. To utječe ne samo tekst već i na druge elemente. Za tu svrhu, oni treba da budu mala slova (npr raspona) ili red-blok (bilo blokove koji određuju prikaz nekretnine: blok). Ova druga opcija također vam omogućuje da promijenite širinu i visinu elementa, fleksibilniji konfiguraciju uvlačenja.

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

centrirano blok

Ako želite da postavite usklađivanje div u sredini, CSS može ponuditi prilično udoban način: upotreba eksternih padding margine. Padding može biti naveden kao blok elemenata, a odabrani blok. Svoysva vrijednost treba biti 0 (vertikalna postava), i auto (automatski udubljenje horizontalno):

• margin: 0 auto;

Sada ova opcija je prepoznat kao apsolutno važeća. Koristeći vanjski padding također omogućava da podesite poravnanje centra: CSS-margin imovine omogućuje nam da riješiti mnoge probleme u vezi sa elementom pozicioniranje na stranici.

Poravnanje lijevo ili desno rub bloka

Ponekad CSS-način ne zahtijeva usklađivanje centar, ali je potrebno uložiti naredna dva bloka, jedan s lijeve strane, a drugi - s desne strane. Za to postoji imovina plovak, koji može uzeti jednu od tri vrijednosti: lijevo, desno ili ništa. Recimo da imate dva bloka koje treba staviti rame uz rame. Onda kod je kako slijedi:

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

Ako postoji i treći blok, koji se mora nalaziti pod prva dva bloka (npr podnožje), onda je potrebno da se registrujete jasna karakteristika:

• .left {float: left;}
• .right {float: right}
• footer {jasna: kako}

Činjenica da je blokova klase lijevo i desno pad od ukupnog toka, to jest, svi ostali elementi ignorisala postojanje elemenata poravnati. Nekretnine jasno: oboje omogućava footer blok ili bilo koje druge vidljive ubrzao iz ćelija toka i zabranjuje wrap (float) i na lijeve i desne. Dakle, u našem primjeru, podnožje je raseljeno naniže.

vertikalnog poravnanja

Postoje slučajevi u kojima nije dovoljno da postavite usklađivanje centra CSS-načine, morate promijeniti i vertikalni položaj djeteta bloka. Svaka linija ili red-blok element može biti podignuta protiv gornji ili donji rub, nalazi se u sredini elementa roditelja ili biti na proizvoljan lokaciji. Većina često zahtijevaju usklađivanje centra bloka, koristi vertikalna-align atribut. Pretpostavimo da postoje dva bloka, jedan ugnežđene u drugi. U ovom unutarnje jedinice - red-blok element (prikaz: inline-block). Potrebno je da se uskladi vertikalne blok djetetu:

• poravnanje gornje granice - .child {vertikalna-align: top};
• centriran - .child {vertikalna-align: srednji};
• poravnanje na donjem rubu - .child {vertikalna-align: bottom};

Na blok elemenata audio text-align, ili vertikalno-align ne primjenjuje.

Mogući problemi sa Aligned jedinicama

Ponekad div align centru CSS-način može uzrokovati malo problema. Na primjer, kada se koristi float: na primjer, postoje tri bloka: .Prvi, .second i .third. Drugi i treći blokovi leže u prvom. Element s klase drugi lijevo poravnat, a posljednji blok - na desnoj strani. Nakon poravnavanja dva pala iz potoka. Ako je element roditelj nije definirana visina (npr 30em), ona će prestati da se protežu visine podružnice jedinica. Da biste izbjegli ovu grešku, koristite "spacer" - specijalna jedinica, koja vidi .second i .third. CSS-kod:

• .second {float: left}
• .third {float: right}
• .clearfix {visina: 0; jasna: oba;}

pseudo često koristi: nakon što omogućava da se vrati u blokove na mjesto stvaranjem psevdorasporki (u primjeru u div sa klase leži unutar kontejnera i sastoji se od .Prvi .left i .right):

• .left {float: left}
• .right {float: right}
• .container: nakon {sadržaja: ''; prikaz: stol; jasna: oba;}

Gore navedenih opcija - najčešći, iako postoje neke razlike. Uvijek možete pronaći najlakši i najbolji način da se stvori psevdorasporki eksperimentima.

Drugi problem često susreću raspored - usklađivanje linija bloka elemenata. Nakon svakog od njih prostor se automatski dodaje. Ručka pomaže imovine marže, koja je definisana negativne uvlačenja. Postoje i drugi načini, koji se koriste rjeđe, na primjer, resetirati veličinu fonta. U ovom slučaju, svojstva elementa roditelja registruje font-size: 0. Ako se nalazi unutar bloka teksta, svojstva linija bloka elementi su se vratili na željenu veličinu slova. Na primjer, font-size: 1em. Metoda nije uvijek zgodno, tako da je mnogo češće koristi verzija s vanjskim marginama.

Poravnanje Blokovi vam omogućuje stvaranje lijepe i funkcionalne stranice: opšti izgled i raspored i lokacija robe u trgovinama i fotografije na sajtu male.