Centrā: CSS izkārtojuma

Kad izkārtojums lapas bieži ir nepieciešams veikt centrētu CSS-veids: piemēram, lai centrētu galveno bloku. Ir vairāki šīs problēmas risinājumi, no kuriem katrs būs agrāk vai vēlāk, ir izmantot jebkuru coder.

Izlīdzināt tekstu centrā

Bieži vien dekoratīvos nolūkos, jūs vēlaties, lai teksts centrēta, CSS šajā gadījumā, lai samazinātu laiku uzlikšanu. Iepriekš tas tika darīts, izmantojot HTML atribūtus, bet tagad standarts nepieciešams, lai saskaņotu tekstu ar stilu lapas. Atšķirībā no bloka, par kuru jūs vēlaties mainīt ārējo polsterējumu CSS saskaņošanu teksta vidū tiek veikta ar vienu līniju:

• text-align: centrs;

Šis īpašums ir mantots un nodots no vecākiem uz visiem bērniem. Tas ietekmē ne tikai tekstu, bet arī uz citiem elementiem. Šim nolūkam, tie ir mazie burti (piemēram, span) vai rindu bloka (jebkuras blokiem, kas norāda displeja īpašums: bloku). Pēdējā iespēja arī ļauj jums mainīt platumu un augstumu elementu, vairāk elastīgu konfigurāciju atkāpi.

lapas bieži vien saskaņot atribūtu sev atzīmi. Tas uzreiz padara kods nederīgs, jo W3C atzina align atribūts novecojis. Izmantojot to lapā nav ieteicama.

Centrā bloks

Ja vēlaties iestatīt izlīdzinājumu div vidū, CSS var piedāvāt diezgan ērts veids: izmantot ārējā apdare rezervi. Polsterējums var norādīt kā bloka elementu, un line-bloku. Svoysva vērtība būtu 0 (vertikāle apdare), un auto (automātisks ierobījums horizontāli):

• margin: 0 auto;

Tagad šī iespēja ir atzīts par absolūti spēkā. Izmantojot ārējā apdare arī ļauj iestatīt saskaņošanu centra: CSS rezervi īpašumu mums ļauj atrisināt daudzas problēmas, kas saistītas ar pozicionēšanas elementa lapā.

Sakārtošana kreisajā vai labajā malā bloka

Dažreiz CSS virzienā neprasa saskaņošanu centra, bet tas ir nepieciešams, lai nākamās divas bloki, viens no kreisās puses un otra - no labās puses. Lai to izdarītu ir pludiņš īpašums, kas var veikt vienu no trim vērtībām: pa kreisi, pa labi vai nav. Pieņemsim, ka jums ir divi bloki, kas būtu novietoti blakus. Tad kods ir šāds:

• .left {float: left;}
• .right {float: pa labi}

Ja ir trešais bloks, kurā jāatrodas zem pirmajos divos blokos (piemēram, footer), tad ir nepieciešams reģistrēt skaidru funkciju:

• .left {float: left;}
• .right {float: pa labi}
• footer {skaidrs: abi}

Fakts, ka bloki ar klasēm pa kreisi un pa labi izkrist no kopējās plūsmas, tas ir, visi citi elementi ignorēja pastāvēšanu elementu jāsaskaņo. Īpašums skaidra: gan ļauj kājenes bloku vai jebkuru citu redzamu nogulsnēts no plūsmas šūnām un aizliedz ietīšana (float) gan uz kreiso un labo pusi. Tāpēc mūsu piemēram, kājenes tiek pārvietota uz leju.

vertikālā izlīdzināšana

Ir gadījumi, kad nav pietiekami, lai noteiktu sakārtošanu centrā CSS-veidos, jums ir arī mainīt vertikālo stāvokli bērnu bloku. Jebkura line vai rindu bloks elements var nospiest pret augšējās vai apakšējās malas, kas atrodas vidū mātes elementa vai būt patvaļīgi vietā. Visbiežāk prasa saskaņot centra bloka, tā izmanto vertikālās līdzināšanas atribūtu. Pieņemsim, ka ir divi bloki, viens ligzdotu otru. Šajā iekštelpu vienība - rindu bloks elementa (displeja: inline-block). Tas ir nepieciešams, lai saskaņotu vertikālo bloks bērnam:

• izlīdzināšana augšējo robežu - .child {vertical-align: top};
• centrēta - .child {vertical-align: middle};
• izlīdzināšana apakšējās malas - .child {vertical-align: bottom};

Pie bloka elementu audio text-align, vai vertikāli-align neattiecas.

Iespējamās problēmas ar Līdzināta vienību

Dažreiz div align centru CSS-veidā, var izraisīt nedaudz problēmas. Piemēram, ja izmantojat float: piemēram, ir trīs bloki: .Pirmkārt, .second un .third. Otrā un trešā bloķē gulēt pirmais. Elements ar klasi otrās līdzināts pa kreisi, un pēdējais bloks - pa labi. Pēc tam, saskaņojot divi samazinājās no straumes. Ja vecāks elements nav definēts augstums (piemēram, 30em), tā vairs stiept augstumu meitas vienībām. Lai izvairītos no šīs kļūdas, izmantojiet "starpliku" - īpaša vienība, kas redz .second un .third. CSS kods:

• .second {float: left}
• .third {float: pa labi}
• .clearfix {augstums: 0; skaidrs: abi;}

pseido bieži izmanto: pēc, kas arī ļauj atgriezties bloki vietā, izveidojot psevdorasporki (piemērā ar div ar klasi slēpjas iekšpusē traukā un ietver .Pirmkārt .left un .right):

• .left {float: pa kreisi}
• .right {float: pa labi}
• .container: pēc {saturu: ''; displejs: galds; skaidrs: abi;}

Iepriekš varianti - visbiežāk, lai gan ir dažas atšķirības. Jūs vienmēr varat atrast vienkāršākais un ērtākais veids, kā izveidot psevdorasporki ar eksperimentiem.

Vēl viena problēma bieži sastopas izkārtojums - saskaņošanu līnijas bloka elementu. Pēc tam, kad katrs no tiem telpa tiek pievienots automātiski. Rokturis tas palīdz rezervi īpašumu, kas ir noteikts ar negatīvu atkāpi. Ir arī citi veidi, kas tiek izmantoti retāk, piemēram, reset fonta lielumu. Šajā gadījumā, īpašības mātes elementa reģistrē font-size: 0. Ja atrodas blokus teksta īpašības līnijas bloka elementu ir atgriezušies vēlamo fonta lielumu. Piemēram, font-size: 1em. Metode ir ne vienmēr ir ērti, tāpēc tas ir daudz parasti izmanto versiju ar ārējām malām.

Sakārtojot bloki ļauj izveidot skaistu un funkcionālu lapas: vispārējo izkārtojumu un izkārtojumu un atrašanās vietu preču veikalos, un fotoattēlus uz vietas mazs.