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

CSS - jazyk kaskádových stylů. Stará technologie přišlo svítání internetová ale nyní aktivně rozvíjí a může vyřešit mnoho problémů, které dříve vyžadovaly použití JavaScript, nativních prostředků. V některých případech však stále dochází k slabosti CSS. Blokovat střed bloku - takové triviální úkol zůstává naléhavým problémem pro každého, kdo stále ještě chápe základy vývoje webových aplikací. S příchodem technologie a flexboxu Grid Layout vyřešit tento problém stal mnohem jednodušší, ale nejsou podporovány všemi prohlížeči, a pro stejnou verzi Internet Explorer 9 bude muset najít jiné řešení. Takže pojďme zvážit hlavní způsoby, jak zarovnat bloky v CSS.


Směrové vedení, nebo, jak umístit CSS do středového bloku

Nejjednodušší způsob, jak centrálního bloku v horizontální rovině, existuje jen několik jednoduché a elegantní řešení. Prvním způsobem - používat vlastnost okraj, který je zodpovědný za vnější polstrování a umožňuje přístroj zarovnat na střed. CSS vám umožňuje dělat to velmi elegantně. Je důležité nezaměňovat ji s vlastností vycpávky, která umožňuje nastavit vnitřní odsazení z obou stran bloku, "tlačit" z obsahu okraje a vytvořit mezi nimi volný prostor. Druhá metoda - použití vlastnost text-align: centrum, zeptal se, jestli blok nebo string-block okamžitě chování (display: inline nebo display: inline-block).

Automatické opakování vpravo a vlevo přes okraj: 0 auto

Vlastnost okrajů umožňuje efektivníumístěte do bloku CSS ve středu nadřazeného bloku, to znamená, že je vhodný pro případy, kdy každá položka má vlastnost zobrazení: blok. Stačí zadat okraj: 0 auto; v souboru CSS nebo použijte atribut stylu v kódu HTML. Dekódujte obsah tohoto parametru:


  • 0 - označuje nepřítomnost vnějších odsazení z horní a dolní části prvku;
  • Auto říká prohlížeči, že nezávisle vypočítává odsazení vpravo a vlevo, definuje volné místo na bocích a rovnoměrně rozdělí na každé straně bloku.
  • Pokud je vše správně provedeno, pak při nastavení okraje vlastností: 0 auto; V CSS bude blok ve středu bloku automaticky. Můžete se zeptat na rozumnou otázku: "Proč nemohu dát marže: auto auto, vyrovnávání jednotky dokonce vertikálně?" Bohužel tato možnost nebude fungovat kvůli funkci blokového modelu, jako je vertikální zhroucení vnějšího odsazení.

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

    Jak jsme uvedli výše, jedním z klíčových vlastností CSS je, že jakýkoli blok může být nastaven na jeden z několika vzorců chování. Dříve jsme se zabývali případem, kdy je položka blokem nejen ve vzhledu, ale také ve vztahu "ve streamu" s dalšími prvky na stránce. Nyní budeme uvažovat o případu, kdy objekt dostane řádku (zobrazení: inline) nebo zobrazí: inline-block. A v prvním a druhém případě vnímá vlastnosti, které řídí chování textu na stránce. A pro zarovnání bloku ve středu CSS pomůžeme parametr text-align: center, který vám umožní vyřešitúkol bez problémů. Jednoduše jsme ji vložili do rodičovské jednotky a náš prvek se automaticky stane přesně uprostřed v horizontální rovině. Bude použit k ovlivnění jiné podobné vlastnosti, jako je například vertikální zarovnání: střední, určené pro centrování textu ve svislém směru.

    Sofistikované CSS: pomocí polohy vlastnost: absolutní

    v CSS vyrovnávacím bloku ve středu, jak je to možné, a s absolutní polohy. Chcete-li zarovnat prvky nekonvenční metody nejčastěji používané vlastnosti pozice: relativní, což vám umožní pohybovat v libovolném směru se zachováním původního umístění na stránce a pozice: absolutní, úplně „vыrыvayuschee“ prvek z potoka a je ideálním místem k nalezení v CSS ve středu bloku ve svislé rovině. Předpokládejme, že náš objekt má výšku 100px a šířku 200px, standardní obdélník. Sladit svůj střed, jsme se ho zeptat zářez na levé a horní 50% (vlevo: 50% Horní: 50%), a poté, co - negativní vnější polstrování z těchto stran o polovinu šířky a výšky bloku (margin-left: -100px a horní: -50px). Upřesněte tuto chvíli podrobněji.
    Vlastnosti vlevo a vpravo s hodnotou 50% „přijímat“ prvek v levém horním rohu a umístěna do CSS bloku ve středu bloku rodiče. Ale to není všechno. V současné době v CSS vyrovnávacím bloku ve středu již nelze považovat za přesné, protože je od centra vzdálen jen horní roh prvku. Abychom dosáhli nejlepšího výsledku, musíme element přesunout zpátky na polovinu šířky a výšky, a to vhodným způsobemvertikální odsazení nebo složitější vlastnost transformace: překládání (-50%, -50%), které provádí stejnou funkci. Nyní je blok zcela přesně umístěn. 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.

    Související publikace