CSS - jezik kaskadnih listov slogov. Stara tehnologija, ki se je pojavila na začetku WEB-a, se danes aktivno razvija in vam omogoča, da z domačimi sredstvi rešite veliko nalog, za katere ste prej potrebovali javascript. Vendar v nekaterih primerih še vedno prihaja do šibkosti CSS. Blok-centriran blok - tako nepomembna naloga je še vedno aktualna tema za vsakogar, ki še vedno razume osnove spletnega razvoja. S prihodom tehnologije Flexbox in Grid Layout je ta naloga postala veliko lažja, vendar ne bodo morali vsi brskalniki in za isto različico IE 9 iskati druge rešitve. Torej, razmislite o glavnih načinih za poravnavo blokov v CSS.
Horizontalna poravnava ali Kako postaviti blok v CSS v središču
Najlažji način, da blok postavite v vodoravno ravnino, tukaj je nekaj preprostih in prefinjenih rešitev. Prvi način je, da uporabite lastnostno mejo, ki je odgovorna za zunanje zanke in vam omogoča, da blok postavite v središče. CSS vam omogoča, da to storite zelo elegantno. Pomembno je, da ga ne zamenjate z lastnostmi oblazinjenja, ki vam omogoča, da nastavite notranje zamikov z obeh strani bloka, "potiskanje" iz vsebine obrobe in ustvarjanje prostega prostora med njimi. Drugi način je uporaba lastnosti text-align: center center, če je blok nastavljen tako, da prikaže bodisi inline ali display: inline-block.
Samodejni poskusi na desno in levo prek robov: 0 auto
Lastnost margine omogoča učinkovitopostavite v blok CSS na sredini nadrejenega bloka, kar pomeni, da je primeren za primere, kjer ima vsak element prikaz lastnosti: block. Samo določite rob: 0 auto; v datoteki CSS ali uporabite atribut style v kodi HTML. Dekodiranje vsebine tega parametra:
0 - pomeni odsotnost zunanjih zamikov od vrha in dna elementa;
Samodejno pove brskalniku, da neodvisno izračuna vdolbine na levo in desno, tako da določi prosti prostor na straneh in ga enakomerno porazdeli na vsaki strani bloka.
Če je vse narejeno pravilno, potem pri nastavitvi robnega premoženja: 0 auto; V CSS bo blok v središču bloka samodejno. Lahko zastavite razumno vprašanje: "Zakaj ne morem dati marže: auto auto, izravnavanje enote celo navpično?" Na žalost ta možnost ne bo delovala zaradi značilnosti blokovnega modela, kot je navpični zlom zunanjega vdolbinja.
Kaj storiti, če ima blok niz vedenja?
Kot smo omenili zgoraj, je ena od ključnih značilnosti CSS ta, da lahko vsak blok nastavimo na enega od več vzorcev vedenja. Zgoraj smo obravnavali primer, ko je postavka blok, ne samo po videzu, ampak tudi v razmerju "v toku", z drugimi elementi na strani. Sedaj bomo obravnavali primer, ko je predmet podan vrstici (prikaz: inline) ali prikaz: inline-block. In v prvem, in v drugem primeru, bo zaznala lastnosti, ki urejajo obnašanje besedila na strani. In za poravnavo bloka v središču CSS bomo pomagali parameter text-align: center, ki vam omogoča, da rešitebrez težav. Pravkar smo ga postavili na starševsko enoto in naš element samodejno postane točno na sredini v vodoravni ravnini. Na druge podobne lastnosti, kot je navpično poravnavanje: srednja, bo vplivala le-ta za vertikalno poravnavo besedila.
Eleganten CSS: uporabite položaj lastnosti: absolutno
V CSS je poravnava bloka v centru možna tudi s pomočjo absolutnega pozicioniranja. Za poravnavo elementov na nestandarden način se najpogosteje uporabljajo pozicije: relativne lastnosti, ki vam omogočajo, da ga premaknete v katerokoli smer, z ohranjanjem prvotnega mesta na strani, in skozi položaj: absolutno, popolnoma "izvleče" element iz toka in je idealno primeren za pozicioniranje Enota CSS v središču bloka v navpični ravnini. Recimo, da je naš objekt višina 100px in širina 200px, standardni pravokotnik. Za poravnavo v sredini, ga prosimo, da zapusti levo in zgornjo 50% (levo: 50% in vrh: 50%), nato pa - negativne zunanje robove od teh strani do polovice širine in višine bloka (rob-levo: -100px) in zgoraj: -50px). Natančneje pojasnite ta trenutek.
Leva in desna lastnost z vrednostjo 50% vodita element v levi zgornji kot in ga postavita v blok CSS v središču nadrejenega bloka. Ampak to še ni vse. Trenutno v CSS-ju poravnava bloka v središču še ne moremo imenovati natančna, ker je center zdaj le zgornji kot elementa. Da bi dosegli najboljši rezultat, moramo element premakniti nazaj na polovico širine in višinevertikalne alinee ali bolj kompleksno lastnost transforma: translate (-50%, -50%), ki opravlja isto funkcijo. Zdaj se blok nahaja natančno. V zaključku ugotavljamo, da je problem mogoče rešiti s pomočjo tehnologije Flexbox, vendar je zasnovan za napredne uporabnike in ne deluje v vseh brskalnikih.
