Spletni razvoj s CSS. Blokiraj v središču bloka: kako hitro rešiti težavo?

CSS je jezik kaskadnih listov slogov. Stara tehnologija, ki se je pojavila na začetku WEB-a, se aktivno razvija danes in nam omogoča, da rešimo številne naloge, za katere je bila uporaba jаvascripta potrebna predhodno, z naravnimi sredstvi.

Toda v nekaterih trenutkih še vedno čutimo slabost CSS. Blokiraj v središču bloka - tako trivialna naloga še vedno ostaja dejanski problem za vsakogar, ki le uči osnove spletnega razvoja. S prihodom Flexbox in Grid Layout je ta naloga postala veliko lažja, vendar jih vsi brskalniki ne podpirajo, IE 9 pa bo moral iskati druge rešitve. Torej, poglejmo osnovne načine poravnave blokov v CSS.

Horizontalna poravnava ali Kako CSS postavite blok v sredino

Najpreprostejši način centriranja bloka vodoravno je takoj nekaj preprostih in elegantnih rešitev. Prvi način je, da uporabite lastnost robov, ki je odgovorna za zunanjo zaprtje in omogoča poravnavo bloga v središču. CSS je zelo eleganten. Pomembno je, da ga ne zamenjate z lastnostmi nalepke, ki vam omogoča, da določite notranje podlage z ene strani bloka, »potisnete« vsebino z meje in ustvarite prosti prostor med njimi.

Druga možnost je uporaba lastnosti text-align: center, če je blok naveden kot obnašanje vrstice ali vrstice (prikaz: vrstni red ali prikaz: inline-block).

Samodejno polnjenje na desni in levi strani robov: 0 auto

Lastnost lastnosti omogoča učinkovito postavitev bloka v središče matičnega bloka v CSS, to je primerna za primere, ko je vsak element prikazan: blok lastnosti. Dovolj je samo, da v datoteki CSS določite rob: 0 samodejnega parametra ali uporabite atribut sloga v HTML kodi. Dešifrirajte vsebino tega parametra:

• 0 - na vrhu in na dnu elementa ni nobenih zunanjih zarez;
• Auto pove vašemu brskalniku, da izračuna indente sami in levo, tako da definira prosti prostor na straneh in ga enakomerno porazdeli na vsaki strani bloka.

Če je vse opravljeno pravilno, ko nastavite rob: 0 samodejna lastnost v CSS, se bo blok v središču bloka samodejno pojavil. Lahko postavite razumno vprašanje: "Zakaj ne morem nastaviti marže: auto auto, poravnava bloka tudi navpično?" Na žalost ta možnost ne deluje zaradi takšne značilnosti modela bloka, saj je navpična kolaps zunanjih alin.

Kaj naj naredim, če je blok dodeljen nizu?

Kot smo že povedali zgoraj, je ena od ključnih značilnosti CSS-a, da je vsakemu bloku mogoče dati eno od več vedenj. Nad zgoraj smo obravnavali primer, ko je element blok ne samo v videzu, ampak tudi v položaju "v toku", odnos z drugimi elementi na strani.

Zdaj bomo razmišljali o primeru, ko se objektu dodeli vrstica (prikaz: inline) ali vedenje linijskih blokov (prikaz: inline-block). V prvem in drugem primeru bo zaznal lastnosti, ki vplivajo na vedenje besedila na strani. In postavite blok v središču v CSS, ki nam pomaga pomagati z besedilom align: center parameter, ki omogoča reševanje problema brez kakršnih koli zapletov. Preprosto ga dodelimo matični enoti in naš element samodejno postane ravno na sredini v vodoravni ravnini. Na to bodo vplivale tudi druge podobne lastnosti, na primer vertikalno poravnavanje: srednja, oblikovana tako, da se besedilo osredotoči navpično.

Eleganten CSS: uporabite lastnost položaja: absolutno

V CSS je poravnava bloka v središču možna tudi z absolutno pozicioniranjem. Za alignment elementov nestandardnih način najpogosteje uporabljena lastnosti stališča: relativna, ki omogoča, da ga premakne v katerokoli smer, medtem ko ohranja prvotne strani prostora, ter s stališča: absolutno, popolnoma "pobeg" elementa iz toka in idealno se nahaja v CSS enoti v središču bloka v navpični ravnini.

Recimo, da ima naš objekt višino 100 pik in širino 200 pik, standardni pravokotnik. Če jo poravnajte na sredino, smo ga prosili, da se umakni na levi in ​​zgornji 50% (levo: 50% in na vrhu: 50%), in potem - na negativne zunanje meje s temi strankami na polovici širine in višine bloka (margin-left: -100px in zgornja: -50px). Podrobneje pojasnimo to točko.

Lastnosti levo in desno z vrednostjo 50% "vzamejo" element v zgornjem levem kotu in ga postavite v blok CSS v središču matičnega bloka. Toda to ni vse. Trenutno v CSS-u se poravnava bloke v središču še ne more klicati točno, ker je v središču sedaj samo zgornji kot elementa. Da bi dosegli najboljše rezultate, se moramo premakniti element nazaj na polovico širine in višine, z uporabo ustrezne vertikalne zareze ali bolj kompleksno nepremičnine preoblikovanje: prevesti (-50%, -50%), ki opravljajo isto funkcijo. Zdaj je enota idealno locirana. Na koncu opažamo, da lahko problem rešite s pomočjo tehnologije Flexbox, vendar je namenjen naprednim uporabnikom in ne deluje v vseh brskalnikih.