Vývoj webu pomocí CSS. Blokovat uprostřed bloku: jak rychle vyřešit problém?

CSS je jazyk kaskádových stylů. Stará technologie, která se objevila na úsvitu webových stránek, se dnes aktivně vyvíjí a umožňuje nám řešit mnoho úkolů, pro které bylo dříve vyžadováno použití jаvascript, a to nativními prostředky.

Ale v některých chvílích stále pociťujeme slabost CSS. Blokovat uprostřed bloku - taková triviální úloha stále zůstává skutečným problémem pro každého, kdo se právě učí základy vývoje webu. S příchodem Flexboxu a rozvržení sítě je tento úkol mnohem jednodušší, ale všechny prohlížeče nejsou podporovány a IE 9 bude muset hledat další řešení. Podívejme se tedy na základní způsoby zarovnání bloků v CSS.

Horizontální zarovnání nebo Jak na CSS umístit blok ve středu

Nejjednodušší způsob, jak centrovat blok horizontálně, je okamžitě několik jednoduchých a elegantních řešení. První cestou je použít vlastnost margin, která je zodpovědná za vnější odsazení a umožňuje zarovnání bloku uprostřed. CSS je velmi elegantní. Důležité je, abyste ji nezaměňovali s vlastností vycpávky, která vám umožňuje určit vnitřní odrážky z obou stran bloku, "posunout" obsah z ohraničení a vytvořit mezi nimi volný prostor.

Druhou možností je použít vlastnost text-align: center, pokud je blok určen jako chování řádku nebo čárového bloku (zobrazení: inline nebo zobrazení: inline-block).

Automatické vycpávky vpravo a vlevo přes okraj: 0 auto

Vlastnost okrajů umožňuje efektivně umístit blok ve středu nadřazeného bloku v CSS, to znamená, že je vhodný pro případy, kdy každý prvek je daný vlastností zobrazení: blok. Stačí zadat okraj: 0 auto-parametr v souboru CSS nebo použít atribut stylu v kódu HTML. Dešifrovat obsah tohoto parametru:

• 0 - v horní a dolní části elementu nejsou žádné vnější zářezy;
• Auto informuje váš prohlížeč, aby vypočítal samostatné a levé odsazení, definoval volný prostor na bocích a rovnoměrně rozložil na každé straně bloku.

Pokud je vše správně provedeno, při nastavování vlastního okraje: 0 v CSS se automaticky zobrazí blok ve středu bloku. Můžete požádat o rozumnou otázku: "Proč nemohu nastavit okraj: auto auto, zarovnáním bloku také vertikálně?" Tato možnost bohužel nefunguje z důvodu takové funkce blokového modelu jako vertikálního kolapsu vnějších odrážek.

Co mám dělat, pokud je bloku zadán řetězec chování?

Jak jsme řekli výše, jedním z klíčových rysů CSS je to, že jakémukoli bloku lze dát jedno z několika chování. Dále jsme se zabývali případem, kdy prvek je blok nejen ve vzhledu, ale také v poloze "v toku", vztah s dalšími prvky na stránce.

Nyní se budeme zabývat případem, kdy je objekt daný řádkem (zobrazení: inline) nebo line-block behavior (zobrazení: inline-block). A v prvním a druhém případě vnímá vlastnosti, které řídí chování textu na stránce. A zarovnejte blok v centru v CSS, text-align: center parameter, který umožňuje vyřešit problém bez jakýchkoliv komplikací, nám pomůže. Jednoduše jej přiřadíme rodičovské jednotce a náš prvek se automaticky stane přesně ve středu ve vodorovné rovině. Bude to ovlivněno dalšími podobnými vlastnostmi, například vertikální zarovnání: uprostřed, určená k vertikálnímu zvětšení textu.

Elegantní CSS: použijte vlastnost pozice: absolutní

V CSS je zarovnání bloku ve středu možné také s absolutní polohou. Pro zarovnání prvků nestandardní způsob nejčastěji používá vlastnosti pozice: relativní, což umožňuje přesunout v libovolném směru při zachování původní stránku prostor, a přes polohu: absolutní, zcela „uniknout“ prvek z průtoku, a ideální, aby byl umístěn v CSS jednotce ve středu bloku ve svislé rovině.

Předpokládejme, že náš objekt má výšku 100px a šířku 200px, standardní obdélník. Chcete-li zarovnat do centra, Zeptáme se ho ustoupit na levé a horní 50% (vlevo: 50% a horní 50%), a poté, co - negativní externality marže s těmito stranami na polovinu šířky a výšky bloku (margin-left: -100px a horní: -50px). Vysvětlete tento bod podrobněji.

Vlastnosti vlevo a vpravo s hodnotou 50% "vezmou" element v levém horním rohu a umístí ho do bloku CSS ve středu nadřazeného bloku. Ale to není všechno. V tomto bodě v zákrytu CSS krabice ve středu nelze nazvat přesné, protože ve středu je nyní pouze horní roh prvku. Pro dosažení nejlepších výsledků, je třeba přesunout položky zpět na poloviční šířku a výšku, s použitím odpovídajících vertikálních prohlubně a komplexnější vlastnost Transformace: přeložit (-50%, -50%), provádění stejné funkce. Nyní je zařízení ideálně umístěno. Závěrem lze poznamenat, že problém lze vyřešit pomocí technologie Flexbox, ale je určen pro pokročilé uživatele a nefunguje ve všech prohlížečích.