fit na strani je pogosto potrebno, da bi center poravnavo CSS-way: na primer, na sredino glavno enoto.Obstaja več rešitev za ta problem, od katerih bo vsak prej ali slej morali uporabiti nobene zbornik.
Align text centered
pogosto za dekorativne namene, ki jo želite nastaviti poravnavo besedila centra, CSS, v tem primeru, zmanjšuje čas uvedbe.Prej je bilo to storjeno z uporabo HTML-atributov, zdaj standard zahteva uskladil besedilo s pomočjo slogov.V nasprotju z bloka, za katerega želite spremeniti zunanje meje, z CSS poravnavo besedila v sredini je narejen z enim samim črto:
- text-align: center;
Ta lastnost je dedna in minilo od staršev za vse otroke.To ne vpliva le na besedilo, ampak tudi na drugih elementih.Če želite to narediti, morajo biti v spodnjem primeru (na primer režim) ali linijski blok (vsi bloki, ki določa zaslon nepremičnine: blok).Slednja možnost omogoča tudi, da spremenite širino in višino bolj prožno konfiguracijo vdolbine.
Pogosto strani uskladiti atribut tag sam.To je takoj naredi kodo, neveljaven, ker W3C priznala align atribut zastarela.Njena uporaba se ne priporoča na strani.
poravnavo blok v središču
Če želite določiti poravnavo središču div, lahko CSS ponujajo dokaj preprost način: uporaba zunanjega indentation marže.Oblazinjenje je mogoče nastaviti kot elementi na ravni blokov in line-blok.Svoysva vrednost mora biti nastavljena na 0 (zamaknjen vertikalno) in avto (avtomatski horizontalni alinea):
- marža: 0 auto;
Zdaj je ta možnost priznana kot absolutno veljavna.Uporaba zunanjega oblazinjenje tudi vam omogoča, da določite poravnavo centra: lastnost CSS-marža nam omogoča, da rešiti veliko težav, povezanih z pozicioniranja elementov na strani.
poravnajte blok na levem ali desnem robu
Včasih je sredinska poravnava CSS-way ni potrebna, vendar pa je potrebno postaviti dve enoti poleg enega na levi strani napada in drugi - z desne.Za te nepremičnine je plovec, ki je lahko v eni od treh vrednosti: levo, desno ali nič.Recimo, da imate dve enote, ki jih je treba postaviti skupaj.Potem bo koda:
- .left {float: left;}
- .right {float: right}
Če obstaja še tretja enota, ki morajo biti v prvih dveh blokov (npr noga), jemorate registrirati nepremičnine jasen:
- .left {float: left;}
- .right {float: right}
- footer {jasen: tako}
dejstvo, da so bloki z razredi levo in desno padec od celotnegatok, to je, vsi drugi elementi prezrla obstoj elementov poravnane.Premoženje jasen: tako omogoča nogo ali katero koli drugo enoto, glej, da je padla iz elementov pretoka in prepoveduje zaviti (float), tako na levi in desni strani.Zato je v našem primeru, se bo noga premik navzdol.
Vertikalna poravnava
Obstajajo primeri, kjer ne zadoščajo set center poravnavo CSS-načinov, morate vedno spremenite navpični položaj bloka otrok.Katerokoli liniji ali blok element se lahko pritisne ob zgornjem ali spodnjem robu, ki se nahaja v sredini matičnega elementa, ali pa mora biti v vsakem mestu.Bolj pogosto zahtevajo uskladitev polje v centru, je atribut uporabljen vertikalni-align.Denimo, da obstajajo dve enoti, ena v drugo.Notranja enota - linija-blok element (izpis: inline-block).Treba je uskladiti enote navpično otroka:
- poravnavo na zgornji meji - .child {vertikalni-align: top};
- sredinska poravnava - .child {vertikalni-align: srednja};
- poravnavo na spodnjem koncu - .child {vertikalni-align: dno};
na elemente na ravni blokov ali text-align ali vertikalni-align ne uporablja.
Možne težave z usklajena enot
Včasih div align center CSS-način lahko povzroči manjše težave.Na primer, z uporabo float: 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 dveh padel iz potoka.Če matična ni opredeljeno višino (npr 30em), ne bo več raztezajo višino podrejenih enot.Da bi se izognili tej napaki, uporabite "distančnik" - posebno enoto, ki vidi .second in .third.CSS-code:
- .second {float: left}
- .third {float: right}
- .clearfix {višina: 0;jasen: oboje;}
pogosto uporablja psevdo: po, ki omogoča tudi vam, da se vrnete blokov v mestu z ustvarjanjem psevdorasporki (v tem primeru v div z razredom posode leži znotraj Najprej je in vsebuje .left in .right):
- .levo {float: left}
- .right {float: right}
- .container: po {vsebino: '';Zaslon: miza;jasen: oboje;}
nad možnostmi - najbolj pogosta, čeprav obstajajo nekatere razlike.Lahko vedno najdete najlažji in najbolj priročen način za ustvarjanje psevdorasporki s poskusi.
Drug problem pogosta postavitev - uskladitev linija-blok elementov.Po vsaki od njih samodejno doda prostoru.Za spopadanje s to nepremičnino pomoč maržo, ki je opredeljena z negativnim zamika.Obstajajo še druge metode, ki se uporabljajo manj pogosto, na primer prestavna velikost pisave.V tem primeru so lastnosti matičnega predpisal font-size: 0.Če se nahaja v bloke besedila, so lastnosti linije-blok elementov vrnil na želeno velikost.Na primer, font-size: 1em.Metoda ni vedno primerna, toliko pogosteje uporabljajo možnost z zunanjimi robovi.
postavitev bloka vam omogoča, da ustvarite lepo in funkcionalno postavitev strani in je na splošno ureditev in lokacija blaga v trgovinah in fotografije na majhnem spletni strani.
