Keskele: CSS-paigutus

Kui paigutus lehel on sageli vaja teha tsentreeritud CSS-viis: näiteks keskele põhiseade. On mitmeid lahendusi sellele probleemile, millest igaüks on varem või hiljem kasutada mis tahes foto.

Teksti joondamine keskele

Sageli kasutatakse dekoratiivsel eesmärgil soovite seada teksti keskele, CSS sel juhul, et vähendada aega kehtestamist. Varem tehti seda kasutades HTML-atribuudid, kuid nüüd standard vajalik, et viia tekst stiili lehel. Erinevalt plokk, mille soovite muuta välise polstri CSS viimine teksti keskel on tehtud ühele reale:

• text-align: center;

See majutusasutus on päritud ja esivanemalt kõik lapsed. See ei puuduta mitte ainult teksti, vaid ka teisi elemente. Selleks tuleks need väiketähed (nt span) või real-plokk (ükskõik plokid, et täpsustada kuva vara: block). Viimane võimalus võimaldab teil muuta laiuse ja kõrguse elemendi, paindlikum konfiguratsiooni taandus.

Lehekülgede sageli viia atribuut ise tag. See tähendab koheselt kood vigane, kuna W3C tunnistas align atribuut vananenud. Kasutades seda lehekülge ei ole soovitatav.

keskele plokk

Kui soovite määrata viimist div keskel, CSS võib pakkuda üsna mugav viis: kasutada välist polster marginaal. Täidis võib olla määratud ploki elementide ja line-plokk. Svoysva väärtus peaks olema 0 (vertikaalne padding), ja auto (automaatne taandus horisontaalselt):

• margin: 0 auto;

Nüüd on see võimalus on tunnistatud täiesti kehtiv. Välise polster ka võimaldab teil määrata viimist keskus: CSS-marginaal vara võimaldab meil lahendada mitmeid probleeme, mis on seotud positsioneerimise element lehel.

Viimine vasakule või paremale ploki servast

Mõnikord CSS-viis ei nõua viimist kesklinnas, kuid on vaja panna järgmise kaks plokki vasakult äärelt ja teine - paremalt. Sel on ujuk vara, mis võib võtta ühe kolmest väärtusest: vasakule, paremale või mitte. Oletame, et teil on kaks plokki, et tuleks paigutada kõrvuti. Siis kood on järgmine:

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

Kui on olemas kolmas plokk, mis peab asuma esimese kahe kvartali (nt jalus), siis on vaja registreerida selge funktsioon:

• .left {float: left;}
• .right {float: õige}
• jalus {selge: nii}

Asjaolu, et klotsid klassi vasakule ja paremale kukkuda koguvooluhulga, see tähendab, kõiki muid elemente ignoreeris tunnuste olemasolu kohta viidud. Property selge: nii võimaldab jalus plokk või muu nähtav sadestus läbivoolurakkudesse ja keelab wrap (float) nii vasakule ja paremale. Seega meie näite, jalus nihutatakse allapoole.

vertikaalne joondus

On juhtumeid, kus ei piisa seatud vastavusse viimist keskel CSS-viise, siis tuleb ka muuta vertikaalasendis lapse blokeerida. Iga rida või rea-plokk element saab surutud vastu ülemist või alumist serva, mis asub keset vanem element või olla suvalise asukoha. Enamasti vajavad ühtlustamist keskel plokk, ta kasutab vertikaalne-align atribuut. Oletame, et on kaks plokki pesastatud muud. Selles siseruumimooduli - rida plokist element (Näit inline-block). See on vajalik selleks, et viia vertikaalse plokk laps:

• orientatsioonile ülemine äär - .child {vertikaalse rõhtsaks: tippu};
• tsentreeritud - .child {vertikaalse rõhtsaks: keskelt};
• orientatsioonile alumine serv - .child {vertikaalse rõhtsaks: alumine};

Plokis elemendid audio text-align või vertikaalne-align ei kehti.

Võimalik probleeme joondatud üksused

Mõnikord div joonda CSS-viis võib põhjustada natuke hädas. Näiteks kui kasutate float: näiteks on kolm rühma: .Esiteks, .second ja .third. Teine ja kolmas plokid peituvad esimesena. Element klassiga teise vasakjoondatud ja viimane plokk - paremale. Pärast viies kahe langes voost. Kui vanem element ei ole määratud kõrgus (nt 30em), siis lõpetatakse venitada kõrgus allasutustega. Selle vea vältimiseks kasutage "spacer" - eriüksus, mis näeb .second ja .third. CSS-kood:

• .second {float: vasak}
• .third {float: õige}
• .clearfix {kõrgus: 0; selge: nii;}

pseudo kasutatakse sageli: pärast, mis võimaldab ka naasta plokid paika luues psevdorasporki (näites on div klassi seisneb mahuti sees ning koosneb .Esiteks .left ja .right):

• .left {float: vasak}
• .right {float: õige}
• .container: pärast {sisaldus: ''; kuva: tabel; selge: nii;}

Ülaltoodud võimalusi - kõige levinum, kuigi seal on mõned variatsioonid. Teil on alati võimalik leida lihtsaim ja mugavaim viis luua psevdorasporki eksperimentidega.

Teine probleem sagedamini paigutus - viimist line plokkelementidest. Pärast iga neist ruumi lisatakse automaatselt. Käsitleda see aitab marginaal vara, mis on määratletud negatiivne taandus. On ka teisi võimalusi, mida kasutatakse harvemini, näiteks reset fondi suurust. Sel juhul omadusi vanema element registreerib font-size: 0. Kui asuvad plokid teksti, omadusi line plokkelementidest on naasnud soovitud font size. Näiteks font-size: 1em. Meetod ei ole alati mugav, nii et see on palju rohkem levinud versiooni väliste marginaalid.

Joondamine Blocks võimaldab teil luua ilus ja funktsionaalne leheküljed: üldine paigutus ja kujundus ja asukohast kaupade poed ja fotosid kohapeal väike.