Centro išlygiavimas: CSS išdėstymas

Kai sukursite puslapį, dažnai reikia centre suderinti CSS metodu: pavyzdžiui, centruokite pagrindinį įrenginį. Šiai problemai spręsti yra keletas būdų, kurių anksčiau ar vėliau turi naudoti bet kuris maketuotojas.

Suderinti tekstą su centru

Dažnai dekoratyviniais tikslais reikia nustatyti, kad tekstas būtų suderintas su centru, šiuo atveju CSS leidžia sumažinti išdėstymo laiką. Anksčiau tai buvo padaryta naudojant HTML atributus, bet dabar standartas reikalauja suderinti tekstą su stiliaus lapų pagalba. Skirtingai nuo blokų, kuriems reikia keisti išorines įtraukas, CSS tekste centras yra centre, naudojant vieną eilutę:

• Text-align: centras;

Ši nuosavybė paveldima ir perduodama iš tėvų visiems palikuonims. Įtakoja ne tik tekstą, bet ir kitus elementus. Norėdami tai padaryti, jie turi būti mažosiomis raidėmis (pvz., Span) arba eilutės bloku (bet kokie blokai, kuriems nustatytas rodinys: bloko nuosavybė). Pastaroji galimybė taip pat leidžia keisti elemento plotį ir aukštį, lankstesnės, kad būtų galima reguliuoti įtraukimą.

Dažnai puslapiuose išlyginti priskiriami pati žymė. Tai nedelsiant padarė kodą negaliojančiu, nes W3C pripažino atributas align kaip pasenęs. Naudoti jį puslapyje nerekomenduojama.

Sulygiuokite bloką prie centro

Jei norite nustatyti div lygį centrui, CSS gali pasiūlyti gana patogų būdą: naudoti išorės maržos maržą. Atributus galima priskirti ir blokiniams elementams, ir eilutėms pagal blokus. Turto vertė turi būti 0 (vertikaliai įterpiama) ir automatinė (automatinės įtraukos horizontaliai):

• Marža: 0 auto;

Dabar ši galimybė yra pripažinta absoliučiai galiojančia. Naudojant išorines atkarpas taip pat galite nustatyti vaizdo derinimą centre: CSS nuosavybės marža leidžia išspręsti daugelį problemų, susijusių su elemento nustatymu puslapyje.

Sulygiuokite bloką kairiuoju arba dešiniuoju kraštu

Kartais jums nereikia suderinti centro su CSS metodu, bet jums reikia įdėti du blokus vienas šalia kito: vienas iš kairiojo krašto, kitas - iš dešinės. Dėl to yra plūduriuojanti nuosavybė, kuri gali būti viena iš trijų verčių: kairėn, dešinėn arba nė viena. Tarkime, kad turite du blokus, kuriuos reikia pateikti šalia. Tada kodas bus:

• . Left {float: left;}
• Right (float: right)

Jei taip pat yra ir trečiasis blokas, kuris turėtų būti po dviem pirmuoju bloku (pvz., Apatine dalimi), tuomet reikia nustatyti aiškią nuosavybę:

• . Left {float: left;}
• Right (float: right)
• Apatinė pusė (aišku: abu)

Svarbu tai, kad blokai su klasėmis, kairiuoju ir dešiniuoju, išeina iš bendro srauto, tai yra visi kiti elementai ignoruoja pačią suderintų elementų buvimą. Aiškus: abiejų savybių dėka poraštė arba bet kuris kitas blokas leidžia matyti elementus, išstumtus iš srauto, ir neleidžia plūduriuoti iš kairės ir į dešinę. Todėl mūsų pavyzdyje poraštė bus judėti žemyn.

Vertikalus išlyginimas

Yra kartų, kai nepakanka centro suderinimo CSS metoduose, vis tiek reikia pakeisti vaiko bloko vertikalią padėtį. Bet kurį eilutės arba eilutės bloko elementą galima paspausti viršutiniame arba apatiniame krašte, kad jis būtų tėvų elemento viduryje arba būti savavališkai. Dažniausiai reikia suderinti bloką su centru, naudodami vertikalaus išlyginimo atributą. Tarkime, yra du blokai, vienas iš jų yra įdėtas kitoje. Šiuo atveju vidinis blokas yra eilutės bloko elementas (rodymas: inline-block). Jūs privalote vertikaliai suderinti vaiko bloką:

• Viršutinės sienos derinimas - .child {vertical-align: top};
• Centro derinimas - .child {vertical-align: middle};
• Sureguliavimas žemiau sienos - .child {vertical-align: bottom};

Blokuoti elementai nei teksto, nei vertikalaus išlyginimo funkcija.

Galimos problemos su suderintais blokais

Kartais suderinus div aplink centrą su CSS metodu gali kilti nedidelių problemų. Pavyzdžiui, jei naudojate "float": pavyzdžiui, yra trys blokai: pirmoji, antra, o trečia. Antrasis ir trečiasis blokai yra pirmajame. Elementas, kurio antroji klasė yra kairėje, yra pagrįsta, o paskutinis blokas yra išlygintas iš kairės. Po išlyginimo abu išėję iš srauto. Jei tėvų elementas neturi aukščio (pavyzdžiui, 30em), jis nebebus tęsiamas išilgai vaiko blokų aukščio. Norėdami išvengti šios klaidos, naudokite "spacer" - specialų bloką, kuris mato. Sekundę ir .third. CSS kodas:

• .svetainė (float: kairėn)
• Trečia (plūdė: dešinė)
• .clearfix (aukštis: 0; Atviras: abu;)

Dažnai naudojama pseudo-klasė: po, kuri taip pat leidžia jums grąžinti blokus į svetainę, sukuriant pseudo-platinimą (pavyzdyje div, konteinerių klasė yra viduje pirmiausia ir turi. Left ir right.):

• . Left (float: left)
• Right (float: right)
• .Container: po {content: ''; Ekranas: stalas; Atviras: abu;)

Pirmiau pateiktos parinktys yra dažniausios, tačiau yra keletas variantų. Eksperimentuodami visada galite rasti paprastą ir patogiausią būdą sukurti pseudo-išsibarstymą.

Kita išdėstymo dizainerių dažnai susiduriama su problemomis, susijusiomis su eilučių blokų elementais. Po kiekvieno iš jų erdvė automatiškai pridedama. Nepagrįsto indėlio reikšmė maržai padeda spręsti šią problemą. Yra ir kitų metodų, kurie naudojami daug rečiau: pavyzdžiui, atstatomas šrifto dydis. Tokiu atveju šrifto dydis: 0 yra nustatytas tėvų elemento savybėms. Jei blokų tekste yra tekstas, reikiamo šrifto dydis grąžinamas eilutės bloko elementų savybėms. Pavyzdžiui, šrifto dydis: 1em. Šis metodas ne visada yra tinkamas, todėl dažniausiai naudojama versija su išorinėmis išpjovomis.

Suderinus blokus galite kurti gražius ir funkcinius puslapius: tai yra bendro išdėstymo išdėstymas, prekių parduotuvių internetinėse parduotuvėse vieta ir nuotraukos vizitinės kortelės svetainėje.