Kuidas CSS-is asju stiilselt tsentreerida

Oleme kõik pettunud CSS-i asjade tsentreerimisest

Olgem ausad. Nagu meie kodeerimisalane karjäär, oleme kõik pettunud CSS-i asjade tsentreerimisest ja leidsime, kuidas Google'i divis või divisjonis keset jaotust tsentreerida.

See peaks olema üks lihtsamaid ülesandeid, kuid võib tekitada segadust, kui lisate oma lehele rohkem elemente ja stiile.

Kuna see on tavaline probleem, olen koostanud CSS-is tsentreerimise võimaluste loendi. Olen lisanud manused / lingid ka igasse CodePeni loodud näitesse. Kaalutage, jagage või kopeerige julgelt nagu soovite!

Vaadake minu CodePensi siit.

Laskem siis asjasse süveneda!

Teksti joondamise meetod

„Teksti joondamine: kese” meetod on ehk kõige tavalisem, mida tsentreerimisel näete. Seda kasutatakse enamasti teksti HTML-i tsentreerimiseks, kuid seda saab kasutada ka jaotuste tsentreerimiseks.

Siin on trikk:

  1. lisage divisjon, mille soovite tsentreerida põhielemendiga (üldtuntud kui ümbris või konteiner)
  2. määrake teksti joondus: keskne element vanemale
  3. siis seadke sisemine div nii, et ekraanil kuvataks: inline-block

Oma näites koos sinise ruuduga lisan selle teise jaotisega, mida nimetatakse sinise ruudu konteineriks. Oma sinise ruudu tsentreerimiseks pidin looma põhielemendi ja määrama oma sinise ruudu kuvamisomaduseks sisemise ploki.

Selle põhjuseks on see, et vaikimisi on div-i displei omadus blokeeritud, mis tähendab, et see katab kogu lehe laiuse. Kui seate minu sinise ruudu kuvamisomaduseks tekstisisese ploki, tagame, et sinine ruut ulatub ainult minu määratud laiuseni, mis on 100 pikslit.

Kui lisate mitu elementi põhielementi (selles näites sinised ruudud), koondatakse need kõik keskele.

Veerise automaatne meetod

Teine levinum tsentreerimisviis on veerise automaatse meetodi kasutamine. Seda meetodit kasutades pole meil vaja lähteelementi.

Kui meie laius on määratletud, saame oma kollasele kastile rakendada lihtsalt veerise 0: auto.

veeris: 0 automaatne on lühend ülemise ja alumise veerise nulli seadmiseks ning vasak ja parem veerise automaatseks muutmiseks.

See on oluline, kuna ilma minu määratletud 100 pikslise laiuseta ei saa brauser kuvada vasakut ja paremat veerist, mis on vajalik kollase kasti tsentreerimiseks. Laiuse määramisega jaotab brauser automaatselt õige koguse marginaali mõlemal pool kollast kasti.

„0” osa saab seada suvalisele arvule pikslitele, mida soovite ülemise ja alumise veerise jaoks.

Veel üks lahe trikk on lihtsalt kas vasak- või vasakrežiimi seadmine automaatseks või veerise parempoolne automaatne seadmine, mis võimaldab meil lükata div vastavalt lehe paremale või vasakule küljele - proovige seda!

Absoluutse positsioneerimise meetod

Elemendi absoluutne positsioneerimine võimaldab meil elemendi paigutada lehele põhimõtteliselt kuhu iganes me soovime ... ühe puudusega.

Absoluutne positsioneerimine eemaldab elemendi lehe voost.

Miks see on oluline?

Noh, see on oluline, kuna see võib vale kasutamise korral põhjustada elementide kattumist.

Kui tahame elemendi lihtsalt horisontaalselt lehele koondada, nagu oleme teinud kahes esimeses meetodis, peame meeles pidama kolme sammu:

  1. Seadke elemendi positsiooni atribuut absoluutseks
  2. Kandke elemendile vasakul: 50%
  3. Seadke elemendi laiusest vasakpoolne veeris

Selles näites kasutame rohelist ruutu (milline ilus roheline!), Mis on sama suur kui teised näited, nii et meie laius on endiselt 100 pikslit.

Nagu näete, olen andnud rohelisele ruudule positsiooni: absoluutne ja kohaldanud vasakule: 50%. See käsib brauseril nihutada vasakut serva 50% paremale.

Kuid kui soovite seda näidet uuesti luua, ei soovi me, et vasak serv oleks keskel, vaid ruudu keskel, et see vastaks lehe keskpaigale.

See viib meid meie viimase sammuni. Asjade joondamiseks ja lisaruumi tasakaalustamiseks rakendame rohelise ruudu laiusest vasakpoolset serva. Meie puhul on see 50 pikslit (olenemata elemendi laiusest, jääb see alati pooleks).

Transformeerimise / tõlkimise meetod

Siiani oleme tegelenud ainult horisontaalse asjade tsentreerimisega, aga mis siis, kui tahame midagi otse lehe keskele asetada?

Keskelgem meie punane ruut nii horisontaalselt kui vertikaalselt.

Kuigi see meetod kasutab ka absoluutset positsioneerimist ja „vasakpoolne: 50%”, olen rakendanud elemendile ka veel kaks omadust.

Kui määrate ka ülemise atribuudi väärtuseks 50%, ütlen brauserile, et see joondaks meie punase ruudu ülaserva lehe keskel vertikaalselt. Kuid nagu eelmises näites, ei taha me, et servad oleksid keskelt rivistatud, tahame, et meie ruudu kese sobiks otse meie lehe keskele.

Siin rakendame uut omadust, mida nimetatakse transformeerimiseks.

Transformeerimisega saab teha palju lahedaid asju, näiteks animatsioonide tõlkimine, pööramine ja mõõtmete muutmine, kuid selle näite jaoks kasutame tõlkimist.

Anname teisendusomadusele “teisendada: tõlkida (-50%, -50%)” ja voila - meie punane ruut on tsentreeritud nii horisontaalselt kui vertikaalselt!

Armastan seda meetodit, sest hoolimata sellest, milline on meie elemendi laius või kõrgus, on see alati lehe keskel.

Seda meetodit kasutatakse sageli reageerivas disainis ja see ei nõua veeriste määratlemist, nagu absoluutse positsioneerimise meetodi puhul.

Flexboxi meetod

Kui te pole Flexboxiga tuttav, on see korras! Flexbox on paigutusmoodul, mis pakub tõhusamat viisi elementide joondamiseks ja paigutamiseks lehele.

Kui olete huvitatud Flexboxi õppimisest (soovitan tungivalt), on Flexbox Froggy suurepärane ja lõbus viis õppida (pole muidugi seotud - see on just see, mida ma Flexboxi õppimiseks kasutasin!)

Flexboxi horisontaalse ja vertikaalse tsentreerimise neli sammu on järgmised:

  1. HTML-i, põhiosa ja põhikonteineri kõrgus peab olema 100%
  2. Seadke ekraan vanema konteineri painutamiseks
  3. Seadke joondatavad üksused põhikonteineri keskele
  4. Seadke õigustav sisu põhikonteineri keskele

Kuvari seadistamine vanema suhtes paindlikumaks määratleb seda kui paindmahutit.

Asetades joondatavad elemendid keskele, ütleme, et lapsed või elastsed esemed peavad olema vanema keskosas vertikaalselt.

Põhjenda sisu töötab samamoodi, kuid meie näite puhul horisontaalsuunas.

Mulle meeldib selle meetodi kasutamine ka seetõttu, et see on jällegi reageeriv ja ei vaja marginaali arvutamist.

Loodetavasti leidsite selle postituse informatiivseks ja abistavaks. Soovin kuulda teie tagasisidet!

Täname, et lugesite! :)

Kas õppida JavaScripti? See võib teid aidata!