Poravnava centra: postavitev CSS

Ko je postavitev strani končana, je v središču pogosto treba poravnati z metodo CSS: na primer osredotočite glavno enoto. Obstaja več načinov za rešitev te težave, ki jih mora vsaka prej ali slej uporabiti kateri koli oblikovalec postavitve.

Poravnajte besedilo s centrom

Pogosto za dekorativne namene, morate nastaviti poravnavo besedila v center, CSS v tem primeru vam omogoča, da zmanjšate čas postavitve. Pred tem je bilo to storjeno z uporabo atributov HTML, zdaj pa standard zahteva poravnavo besedila s slogovnimi listi. Za razliko od blokov, za katere želite spremeniti zunanjo alinejo, se v CSS-u besedilo osredotoči na središče z eno vrstico:

• poravnava besedila: center;

Ta lastnost je podedovana in od staršev prešla na vse otroke. Ne vpliva le na besedilo, ampak tudi na druge elemente. Za to morajo biti male črke (npr. Razpon) ali linijski blok (kateri koli bloki, na katere je prikazan prikaz: lastnost bloka). Zadnja možnost vam omogoča tudi spreminjanje širine in višine elementa, bolj prilagodljiva pa je prilagoditev alinej.

Pogosto na poravnavi strani pripisujejo oznako. To takoj naredi kodo neveljavno, ker je W3C prepoznal atribut poravnave kot zastarel. Uporaba te strani ni priporočljiva.

Poravnajte blok s središčem

Če želite nastaviti poravnavo diva na sredino, lahko CSS ponudi precej priročen način: z uporabo zunanje margine. Indents se lahko dodelijo tako elementom blokov kot tudi vrstnim vrsticam. Vrednost lastnosti mora biti 0 (navpično) in samodejno (vodoravna zasuka):

• margin: 0 auto;

Ta možnost je zdaj priznana kot popolnoma veljavna. Z uporabo zunanjih zaslona lahko nastavite tudi poravnavo slike v središču: CSS lastnine marže vam omogoča reševanje številnih težav, povezanih s pozicioniranjem predmeta na strani.

Poravnajte blok levo ali desno

Včasih ni treba poravnati v središču z metodo CSS, vendar morate postaviti dva bloka ob drugem: eno od levega roba, drugo pa desno. Za to je lastnost plovca, ki lahko sprejme eno od treh vrednosti: levo, desno ali nič. Recimo, da imate dva bloka, ki jih je treba postaviti drug ob drugem. Nato bo koda:

• .levo {float: levo;}
• .desno (float: desno)

Če obstaja tudi tretji blok, ki naj bi bil nameščen v prvih dveh blokih (na primer noga), potem mora nastaviti jasno lastnost:

• .levo {float: levo;}
• .desno (float: desno)
• noga {jasno: oboje)

Zadeva je, da bloki z razredi levo in desno izstopajo iz splošnega toka, to pomeni, da vsi drugi elementi prezreti obstoj usklajenih elementov. Jasna: obe znamki omogočata, da noga ali kateri koli drugi blok vidijo elemente, ki so padli iz toka, in preprečuje plavajočo levo in desno. Zato se v našem primeru noga premika navzdol.

Navpična poravnava

Obstajajo primeri, ko ni dovolj, da bi določene poravnavo središču CSS-načinov, morate spremeniti tudi navpični položaj bloka otrok. Vsaka vrstica ali vrstičnem blok Element lahko pritisne ob zgornjem ali spodnjem robu, ki se nahaja v sredini matičnega elementa ali v poljubni lokaciji. Najpogosteje morate blok poravnati do sredine z uporabo atributa navpično poravnavo. Recimo, da sta dva bloka, ena je ugnezdena v drugi. Notranji blok je element vrstice (prikaz: inline-block). Otroški blok morate poravnati navpično:

• poravnava na zgornji meji - .child {vertical-align: top};
• središčno poravnavo - .child {vertikalno-poravnava: sredina};
• poravnava na spodnji rob - .child {vertical-align: bottom};

Blokiraj elemente, ne poravnajte besedila niti funkcijo vertikalne poravnave.

Možne težave pri poravnanih blokih

Včasih poravnava div okoli centra s CSS metodo lahko povzroči manjše težave. Na primer, kadar uporabljate float: na primer obstajajo trije bloki: .first, .second in .third. Drugi in tretji blok sta v prvem. Element z drugo stopnjo je levo-upravičen, zadnji blok pa je pravokoten. Po izenačitvi sta obe izstopili iz toka. Če starša nima višine (na primer 30em), se ne bo več raztezala vzdolž višine otroških blokov. Da bi se izognili tej napaki, uporabite "spacer" - poseben blok, ki ga vidimo. Sekundo in .tird. CSS-koda:

• .drugi {float: left}
• .tretji {float: desni}
• .clearfix {višina: 0- jasno: oboje-}

psevdo pogosto uporabljajo: Po, ki tudi omogoča, da vrnejo bloki na mesto, ki ga ustvarja psevdorasporki (na primer v div z razredom leži znotraj vsebnika in obsega Najprej je .left in .right):

• .levo {float: left}
• .desno (float: desno)
• .vsebnik: po {vsebina: `` - prikaz: tabela jasno: oboje-}

Navedene možnosti so najpogostejše, čeprav obstaja več različic. Vedno lahko najdete najpreprostejši in najprimernejši način za ustvarjanje pseudo-razpršenja z eksperimentiranjem.

Drug problem, s katerim se pogosto soočajo oblikovalci postavitve, usklajuje elemente vrstice. Po vsakem od njih se samodejno doda prostor. Lastnost robov, ki je določena z negativnim zamikom, pomaga obvladovati to. Obstajajo še druge metode, ki se uporabljajo veliko manj pogosto: na primer, ničle velikost pisave. V tem primeru je velikost pisave: 0 nastavljena v lastnosti nadrejenega elementa. Če je besedilo znotraj blokov, se v lastnostih vrstičnih elementov vrne zahtevana velikost črk. Na primer, velikost pisave: 1em. Metoda ni vedno priročna, zato se različica z zunanjimi izrezki pogosteje uporablja.

Poravnavanje blokov omogoča ustvarjanje lepih in funkcionalnih strani: to je postavitev celotne postavitve, lokacija blaga v spletnih trgovinah in fotografije na spletnem mestu vizitke.