Centered: CSS-postavitev

Ko je postavitev strani pogosto treba narediti centered CSS-način: na primer, na sredino glavno enoto. Obstaja več rešitev za ta problem, od katerih bo vsak prej ali slej morali uporabiti nobene zbornik.

Poravnava besedila na sredino

Pogosto za dekorativne namene želite nastaviti besedilo središčem, CSS v tem primeru, da se zmanjša čas uvedbe. Prej je bilo to storjeno z uporabo HTML-atribute, zdaj pa zahteva standard za uskladitev besedila s slogi. V nasprotju z bloka, za katerega želite spremeniti zunanjo oblazinjenje v CSS uskladitev besedila v sredini je narejen z eno vrstico:

• text-align: center;

Ta lastnost je dedna in se prenese od staršev za vse otroke. To ne vpliva samo besedilo, temveč tudi na druge elemente. V ta namen morajo biti male črke (npr, režim) ali vrstica-blok (vsi bloki, ki določajo zaslona nepremičnine: blok). Ta možnost vam omogoča, da spremenite širino in višino elementa, bolj prožno konfiguracijo vdolbino.

Strani pogosto uskladiti atribut k sebi oznako. To je takoj naredi koda neveljavna, ker W3C priznala align atribut zastarela. Uporaba je na strani, ne priporočamo.

sredinska blok

Če želite nastaviti poravnavo div v sredini, lahko CSS ponujajo precej udoben način: z uporabo zunanjega padding marže. Oblazinjenje se lahko določi kot blok elementov in začetno blokom. Svoysva vrednost mora biti 0 (navpično oblazinjenje) in samodejno (avtomatsko vdolbina vodoravno):

• marža: 0 auto;

Zdaj je ta možnost priznan kot popolnoma veljaven. Uporaba zunanjega oblazinjenje tudi omogoča, da nastavite poravnavo centra: lastnost CSS-marža nam omogoča, da rešiti veliko težav, povezanih z pozicioniranja element na strani.

Uskladitev levem ali desnem robu bloka

Včasih CSS-način ne zahteva poravnavo centra, vendar pa je potrebno postaviti v naslednjih dveh blokov, eden na levi strani in na drugi - z desne. Za to je plovec premoženje, ki je lahko v eni od treh vrednosti: levo, desno ali nič. Recimo, da imate dva bloka, ki naj dajejo ob bok. Potem koda je naslednja:

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

Če je tretji blok, ki se mora nahajati v okviru prvih dveh blokov (npr, noge), potem je potrebno registrirati jasno funkcijo:

• .left {float: left;}
• .right {float: igralec}
• Noga {jasen: oboje}

Dejstvo, da so bloki z razredi levo in desno izpadejo celotnega toka, kar pomeni, vsi drugi elementi prezrla obstoj elementov poravnane. Nepremičnine jasno: tako omogoča noge blok ali katere koli druge vidne obori iz celic tokov in prepoveduje zaviti (float), tako na levi in desni strani. Zato je v našem primeru, se noga premakne 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. Najbolj pogosto zahtevajo uskladitev sredini bloka, ki jih uporablja atribut vertikalno poravnati. Recimo, da obstajata dve ulici, ena ugnezdene znotraj druge. Pri tem notranji enoti - vrstičnem blok element (izpis: inline-block). Treba je uskladiti navpično blok otroka:

• uskladitev zgornje meje - .child {vertikalnim Poravnava: zgornji};
• centrirana - .child {vertikalnim Poravnava: srednja};
• poravnavo spodnjega roba - .child {vertikalno poravnati: dno};

Na skupinskih elementov avdio text-align, ali vertikalni-align ne velja.

Morebitne težave s poravnanimi enot

Včasih div align center CSS-način lahko povzroči nekaj težav. Na primer, če uporabljate plovec: na primer, obstajajo trije bloki: Najprej je, .second in .third. Drugi in tretji bloki so v prvi. Element z razredom drugi levo poravnano, in zadnji blok - na desni strani. Po uskladitvi sta padla iz potoka. Če je matična element ni opredeljeno višino (npr 30em), da ne bo več, da se raztezajo v višino podrejenih enot. Da bi se izognili tej napaki, uporabite "distančnik" - posebno enoto, ki vidi .second in .third. CSS-številka:

• .second {float: levo}
• .third {float: igralec}
• .clearfix {višina: 0; jasen: 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):

• .left {float: levo}
• .right {float: igralec}
• .container: po {vsebino: ''; Zaslon: tabela; jasen: oboje;}

Omenjene nastavitve - najbolj pogosta, čeprav obstajajo nekatere razlike. Vedno lahko najti najlažji in najbolj priročen način za ustvarjanje psevdorasporki s poskusi.

Drug problem pogosta postavitev - uskladitev linija-blok elementov. Po vsakem od njih se samodejno doda prostor. Ročaj pomaga nepremičnine na cene, ki je določena z negativnim zamika. Obstajajo tudi drugi načini, ki se uporabljajo manj pogosto, na primer, ponastavitev velikost pisave. V tem primeru, lastnosti matičnega elementa registrira font-size: 0. Če se nahaja v bloke besedila, so lastnosti linije skupinskih elementov vrnil na želeno velikost pisave. Na primer, font-size: 1em. Metoda ni vedno primerna, zato je toliko bolj pogosto uporablja različico z zunanjimi robovi.

Poravnava bloki omogoča ustvarjanje lepe in funkcionalne strani: splošno postavitev in postavitev in lokacijo blaga v trgovinah in fotografije na mestu majhna.