DIV centrum zarovnání

. Dokonce i s nástupem HTML5 a vznikem vážných konkurentů v podobě článku nebo záhlaví je i nadále všude vkládán do značky. Proto doporučuji, abyste se vypořádali s problematikou formátování a zarovnávání divů ve středu.

Co je div?

Název prvku pochází z anglického slovního dělení, což znamená rozdělení. Při psaní označení se používá k přetržení prvků do bloků. Div obsahuje obsahové skupiny na webové stránce. Například obrázky, odstavce s textem. Značka nemá vliv na zobrazení obsahu a nenese na sobě žádné sémantické zatížení.

DIV podporuje všechny globální atributy. Ale pro návrh webových stránek potřebujete pouze dvě - je to třída a id. Vše ostatní si pamatujete jen v exotických případech, a to není fakt. Atribut zarovnání, který byl dříve použit k centrování div nebo levé, je zastaralý.

Kdy použít div

Představte si, že místo je chladničkou, a DIV jsou plastové nádoby, pomocí kterých je třeba třídit obsah. V jednom kontejneru s játrovými klobásami nedáte plody. Každý typ výrobku, který dáte samostatně. Podobně je generován webový obsah.

Otevřete libovolné stránky a rozdělte je do smysluplných bloků. V horní části víčka, pod zápatí, ve středu hlavního textu. Obvykle je na straně menší sloupec s reklamním obsahem nebo oblačkem značek.

Nyní rozeberte každou sekci podrobněji. Začněte hlavičkou. Hlavička webu má samostatné logo, navigaci, titul první úrovně, někdy slogan. Přiřaďte kontejner ke každému sémantickému bloku. Takže nejenže oddělujete prvky v proudu, ale také usnadníte jejich formátování. Bude vám mnohem jednodušší zarovnat objekt do značky DIV ve středu přidáním třídy nebo identifikátoru.

Zarovnání středu DIV pomocí okrajů

Při zpracování webových prvků prohlížeč bere v úvahu tři vlastnosti: polstrování, vykrojení a ohraničení. Padací polstrování je prostor mezi obsahem a jeho hranicí. Okraj - pole oddělující jeden objekt od druhého. Hranice je čára podél bloků. Mohou být přiděleny okamžitě ze všech nebo pouze z jedné strany:

 div{border: 1px solid #333;border-left: none;} 

Tyto vlastnosti přidávají volné místo mezi objekty a pomáhají je zarovnat a umístit podle potřeby. Například pokud blok s obrázkem musí být posunut z levého okraje do středu o 20%, přiřadíte prvek levého okraje s hodnotou 20%:

 .block-with-img{margin-left: 20%;} 

Elementy lze také formátovat pomocí jejich šířky a záporných odsazení. Existuje například blok s rozměry 200 x 200 pixelů. Nejprve jej přiřadíme absolutní polohování a posuneme ji do středu o 50%.

 div{position: absolute;left: 50%;} 

Nyní, aby bylo DIV ideálně umístěno uprostřed, dáváme jeho zápornou odrážku vlevo, která odpovídá 50% její šířky, tj. -100 pixelů:

 margin-left: -100px; 

V CSS se tato metoda nazývá "odstraňování vzduchu". Má však zásadní nevýhodu v tom, že je třeba provádět konstantní výpočty, což je docela těžké udělat pro prvky s několika úrovněmi hnízdění. Pokud je nastaveno polstrování a šířka okraje, výchozí prohlížeč vypočítá velikost kontejneru jako součet tloušťky okraje, výplně vpravo, vlevo a samotný obsah uvnitř, což může být také překvapením.

Takže pokud potřebujete centrum DIV vystředit, použijte vlastnost dimenzování pole s hodnotou rámečku. Neumožní prohlížeču přidat odrážky a ohraničení na celkovou šířku prvku DIV. Chcete-li zvýšit nebo snížit prvek, použijte také záporné hodnoty. V tomto případě je však můžete přiřadit buď do horního nebo spodního pole kontejneru.

Jak zarovnat blok DIV ve středu pomocí automatických polí

Jedná se o snadný způsob, jak centrovat velké bloky. Jednoduše přiřadíte šířku kontejneru a vlastnost okrajů auto. Prohlížeč umístí blok ve středu se stejnými políčkami vlevo a vpravo a vše vykoná sám. Výsledkem je, že neriskujete, že byste se zapletli do matematických výpočtů a výrazně ušetříte čas.

 div{width: 90%;margin: 0 auto;} 

Při vývoji citlivých aplikací použijte metodu automatického pole. Hlavní věcí je přiřadit kontejneru hodnotu šířky v em nebo v procentech. Kód z výše uvedeného příkladu bude centrovat DIV ve středu a na jakémkoli zařízení, včetně mobilních telefonů, bude zabírat 90% obrazovky.

Zarovnání zobrazením: vlastnost inline-block

Ve výchozím nastavení jsou prvky DIV považovány za blok a jejich zobrazovaná hodnota je blokována. Pro tuto metodu budete muset tuto vlastnost přepsat. Použitelné pouze pro div s nadřazeným kontejnerem:

  Jakýkoli text 

Prvek s třídou vnější-div je přiřazena vlastnost text-align s prostřední hodnotou, která umístí text do středu. Zatím ale prohlížeč vidí vložený DIV jako blokový objekt. Aby vlastnost text-align fungovala, musí být inner-div vnímána jako malá. Proto v tabulce CSS pro volič inner-div zapíšete následující kód:

.inner-div{display: inline-block;} 

Změníte vlastnost zobrazení z bloku na inline-block.

Metoda transformace / překladu

Kaskádové styly poskytují možnost pohybovat se, kosit, otáčet a přeměňovat webové prvky ve všech směrech. Chcete-li to provést, použijte vlastnost transformace. Hodnoty označují požadovaný typ konverze a stupeň. V tomto příkladu budeme pracovat s překladem:

 transform: translate(50%, 50%); 

Funkce překladu přenese prvek ze své aktuální polohy vlevo / vpravo a nahoru / dolů. V závorkách jsou uvedeny dvě hodnoty:

• stupeň horizontálního pohybu;
• stupně pohybu vertikálně.

Pokud se prvek musí přesunout pouze podél jedné z os souřadnic, potom po zadání slova zadejte název osy a v závorkách hodnotu požadovaného posunutí:

 transform: translateY(-20%); 

V některých cvičeních naleznete transformaci s předponami dodavatele:

 -webkit-transform: translate(50%, 50%);-ms-transform: translate(50%, 50%);transform: translate(50%, 50%); 

V roce 2018 to již není nutné, vlastnost podporuje všechny prohlížeče, včetně Edge a IE.

Aby bylo možné posunovat DIV, které potřebujeme v centru, je funkce prokládání CSS zapsána s hodnotou 50% pro svislou a vodorovnou osu. Díky tomu prohlížeč přenese prvek z jeho aktuální polohy o polovinu šířky a výšky. Musí být specifikovány vlastnosti šířky a výšky:

  Zde je nějaký text 

Mějte na paměti, že prvek, na který je použita vlastnost transformace, se pohybuje bez ohledu na objekty kolem ní. Na jedné straně je výhodné, ale někdy se pohybuje, DIV může zablokovat další kontejner. Proto je tato metoda centrování webových komponent považována za nestandardní a používá se pouze v případě nouze. Transformace nad všemi kanyly CSS se používají pro animaci.

Práce s rozložením Flexboxu

Flexbox je považován za obtížný způsob, jak rozvrhnout rozvržení webu. Ale pokud to zvládnete, pochopíte, že je mnohem jednodušší a příjemnější než standardní formátovací metody. Specifikace Flexbox je flexibilní a neuvěřitelně výkonný způsob, jak manipulovat s položkami. Z angličtiny je název modulu přeložen jako "flexibilní kontejner". Hodnoty šířky, výšky, umístění prvků jsou automaticky nastaveny bez výpočtu odsazení a okrajů.

V předchozích příkladech jsme již pracovali s vlastností zobrazení, ale požádali jsme o blokovou (blokovou) a řetězcovou (inline-block) hodnotu. Pro vytvoření rozložení flexu použijeme display: flex. Nejprve potřebujeme flexibilní kontejner:

Chcete-li jej převést na kontejner flex v kaskádových stolech, píšeme:

 .flex-container{display: flex;} 

Všechny objekty uzavřené v něm, ale pouze přímé potomky, budou prvky flex:

  První 
  Druhý 
  Třetí 
  Čtvrtý 

Pokud umístíte seznam do kontejneru flex, pak se položky seznamu li nepovažují za prvky flex. Rozložení Flexboxu bude fungovat pouze na ul:

Pravidla pro umístění Flexu

Chcete-li spravovat elementy flex, potřebujete ospravedlnit obsah a zarovnat položky. V závislosti na zadaných hodnotách tyto dvě vlastnosti automaticky umisťují objekty podle potřeby. Pokud potřebujeme zarovnat všechny vnořené DIV do středu, zapíšeme to justify-content: center, align-items: center a nic jiného. Prohlížeč provede sám zbytek práce:

  První 
  Druhý 
  Třetí 
  Čtvrtý 

Chcete-li zarovnat text ve středu DIV, což jsou prvky flexu, můžete použít standardní techniku ​​text-align. Nebo můžete vytvořit každý vnořený div i pro kontejnery a spravovat obsah s ospravedlnitelným obsahem. Tato metoda je mnohem racionálnější, pokud uvnitř obsahuje různorodý obsah, včetně grafiky, dalších vnořených objektů, včetně víceúrovňových seznamů.