CSS - jazyk kaskádových štýlov. Stará technológia, ktorá sa objavila na začiatku WEB, sa dnes aktívne rozvíja a umožňuje vám riešiť množstvo úloh, na ktoré ste predtým potrebovali javascript, natívnymi prostriedkami. V niektorých prípadoch však stále pretrváva slabosť CSS. Blokovo zameraný blok - takáto triviálna úloha je stále aktuálnym problémom pre každého, kto stále chápe základy vývoja webu. S príchodom technológie Flexbox a Grid Layout sa táto úloha stala oveľa jednoduchšou, ale nie všetkými prehliadačmi a pre rovnakú verziu IE 9 bude musieť hľadať iné riešenia. Pozrime sa teda na hlavné spôsoby zarovnania blokov v CSS.
Horizontálne vyrovnanie alebo Ako umiestniť blok do CSS v strede
Najjednoduchší spôsob, ako centrovanie bloku v horizontálnej rovine, je tu niekoľko jednoduchých a sofistikovaných riešení. Prvý spôsob je použiť okraj vlastností, ktorý je zodpovedný za vonkajšie odsadenia a umožňuje zarovnať blok v strede. CSS vám to umožňuje veľmi elegantne. Je dôležité, aby ste sa nezamieňali s vlastnosťou výplne, ktorá vám umožňuje nastaviť vnútorné odsadenia z oboch strán bloku, "tlačiť" z obsahu hraníc a vytvoriť medzi nimi voľný priestor. Druhou možnosťou je použiť funkciu text-align: center, ak je blok nastavený tak, aby sa zobrazoval buď inline alebo na displeji: inline-block.
Automatické opakovanie vpravo a vľavo cez okraj: 0 auto
Vlastnosť okraja umožňuje efektívneumiestnite do bloku CSS uprostred nadradeného bloku, to znamená, že je vhodný pre prípady, keď každá položka má zobrazenie vlastnosti: blok. Stačí zadať okraj: 0 auto; v súbore CSS alebo použite atribút štýlu v kóde HTML. Dekódujte obsah tohto parametra:
0 - označuje absenciu vonkajšej zarážky zhora a spodku prvku;
Automatický prehliadač prehliadača, že nezávisle počíta zárezy vpravo a vľavo, definuje voľné miesto na bokoch a rozdeľuje ho rovnomerne na každú stranu bloku.
Ak je všetko vykonané správne, potom pri nastavení okraja vlastnosti: 0 auto; V systéme CSS bude blok v strede bloku automaticky. Môžete sa opýtať na rozumnú otázku: "Prečo nemôžem dať okraj: auto auto, vyrovnanie jednotky dokonca vertikálne?" Bohužiaľ táto voľba nebude fungovať vďaka funkcii blokového modelu, ako je vertikálny kolaps vonkajšieho odsadenia.
Čo robiť, ak je bloku daný reťazec?
Ako sme diskutovali vyššie, jednou z kľúčových vlastností CSS je to, že každý blok môže byť nastavený na jeden z niekoľkých vzorcov správania. Vopred sme považovali prípad, keď je položka blokom nielen vo vzhľade, ale aj vo vzťahu "v prúde" s inými prvkami na stránke. Teraz budeme brať do úvahy prípad, keď je objekt daný riadkom (zobrazenie: inline) alebo zobraziť: inline-block. A v prvom a druhom prípade vníma vlastnosti, ktoré riadia správanie textu na stránke. A na zarovnanie bloku v strede CSS pomôžeme parametre text-align: center, čo vám umožní vyriešiťúloha bez ťažkostí. Jednoducho sme ju umiestnili na rodičovskú jednotku a náš prvok sa automaticky stane presne v strede v horizontálnej rovine. Bude použitý na ovplyvnenie iné podobné vlastnosti, ako je napríklad vertikálne zarovnanie: stredná, určené pre centrovanie textu vo zvislom smere.
Sofistikované CSS: pomocou polohy vlastnosť: absolútna
v CSS vyrovnávacom bloku v strede, ako je to možné, a s absolútnou polohy. Ak chcete zarovnať prvky nekonvenčné metódy najčastejšie používané vlastnosti pozície: relatívna, čo vám umožní pohybovať v ľubovoľnom smere so zachovaním pôvodného umiestnenia na stránke a pozície: absolútna, úplne "vыrыvayuschee" prvok z potoka a je ideálnym miestom na nájdenie v CSS v strede bloku vo vertikálnej rovine. Predpokladajme, že náš objekt má výšku 100px a šírku 200px, štandardný obdĺžnik. Zladiť svoj stred, sme sa ho opýtať zárez na ľavej a hornej 50% (vľavo: 50% Horná: 50%), a potom, čo - negatívne vonkajšie polstrovanie z týchto strán o polovicu šírky a výšky bloku (margin-left: -100px a vrchol: -50px). Upresnite tento moment podrobnejšie.
Vlastnosti vľavo a vpravo s hodnotou 50% "prijímať" prvok v ľavom hornom rohu a umiestnená do CSS bloku v stredu bloku rodičia. Ale to nie je všetko. V súčasnej dobe v CSS vyrovnávacom bloku v stredu už nemožno považovať za presné, pretože je od centra vzdialený len horný roh prvku. Aby sme dosiahli čo najlepšie výsledky, musíme prvok posunúť späť na polovicu šírky a výšky, a to pomocou vhodnýchvertikálne odsadenia alebo zložitejšia vlastnosť transformácie: prekladať (-50%, -50%), ktorá vykonáva rovnakú funkciu. Teraz je blok úplne presne umiestnený. Záverom je, že problém možno vyriešiť pomocou technológie Flexbox, ale je určený pre pokročilých používateľov a nefunguje vo všetkých prehliadačoch.
