Nabídka vpravo

Věta používající konec

C V E TÓNa

K vytvoření červené čáry potřebujete znát pouze jeden parametr.

Je to jednoduchá vlastnost odsazení textu.

. I s příchodem HTML5 a se vznikem vážných konkurentů ve formě článku nebo záhlaví je nadále všude vkládáno do značek. Navrhuji proto, abyste se zabývali otázkou formátování a zarovnání bloků div na střed.

Co je DIV

Název prvku pochází z anglického slova division, což znamená rozdělení. Při psaní značek se používá k rozdělení prvků do bloků. DIV uzavírají skupiny obsahu na webové stránce. Například obrázky, odstavce s textem. Tag nijak neovlivňuje zobrazení obsahu a nenese žádnou sémantickou zátěž.

DIV podporuje všechny globální atributy. Pro webdesign ale potřebujete jen dva – třídu a id. Na všechno ostatní si vzpomenete jen v exotických případech, a to není pravda. Atribut align, který se dříve používal k zarovnání prvku div na střed nebo doleva, je zastaralý.

Kdy použít DIV

Představte si, že web je lednička a DIV jsou plastové nádoby, podle kterých musíte třídit obsah. Ovoce nebudete dávat do stejné nádoby s játrovkou. Každý druh produktu vkládáte samostatně. Webový obsah je generován podobným způsobem.

Otevřete libovolný web a rozdělte jej do sémantických bloků. Záhlaví nahoře, zápatí dole, hlavní text uprostřed. Na boku bývá menší sloupec s propagačním obsahem nebo tag cloud.

Nyní rozeberte každou sekci podrobněji. Začněte záhlavím. Záhlaví webu má samostatné logo, navigaci, nadpis první úrovně a někdy i slogan. Ke každému sémantickému bloku přiřaďte svůj vlastní kontejner. To nejen oddělí prvky v toku, ale také usnadní jejich formátování. Bude pro vás mnohem snazší vycentrovat objekt ve značce DIV tím, že mu přidělíte třídu nebo ID.

Zarovnat na střed DIV s okraji

Při vykreslování webových prvků bere prohlížeč v úvahu tři vlastnosti: padding, margining a border. padding je prostor mezi obsahem a jeho okrajem. Margin - pole oddělující jeden objekt od druhého. Hranice jsou čáry podél bloků. Mohou být přiřazeny najednou ze všech nebo pouze z jedné strany:

div( border: 1px solid #333; border-left: none; )

Tyto vlastnosti přidávají volný prostor mezi objekty a také je pomáhají zarovnat a umístit podle potřeby. Pokud například blok s obrázkem potřebuje být posunut od levého okraje ke středu o 20 %, přiřadíte prvku levý okraj s hodnotou 20 %:

Block-with-img(levý okraj: 20 %; )

Prvky lze také formátovat pomocí hodnot jejich šířky a záporného odsazení. Například existuje blok o rozměrech 200 x 200 pixelů. Nejprve mu přiřaďte absolutní pozici a posuňte jej do středu o 50 %.

Div( pozice: absolutní; vlevo: 50 %; )

Nyní, abyste se ujistili, že je DIV dokonale vycentrován, dejte mu záporné levé odsazení rovnající se 50 % jeho šířky, tj. -100 pixelů:

margin-left: -100px

V CSS se tomu říká „odvzdušnění“. Má však značnou nevýhodu v nutnosti provádět konstantní výpočty, což je u prvků s několika úrovněmi vnoření poměrně obtížné. Pokud je nastaveno odsazení a šířka okraje, prohlížeč ve výchozím nastavení vypočítá rozměry kontejneru jako součet šířky okrajů, odsazení napravo, nalevo a samotného obsahu uvnitř, což může být také překvapení.

Takže když potřebujete vycentrovat DIV, použijte vlastnost box-sizing s hodnotou border-box. Zabrání prohlížeči v přidání hodnoty odsazení a okraje k celkové šířce prvku DIV. Chcete-li zvýšit nebo snížit prvek, použijte také záporné hodnoty. Ale v tomto případě mohou být přiřazeny buď k hornímu nebo spodnímu poli kontejneru.

Jak vycentrovat blok div pomocí automatických okrajů

Toto je snadný způsob, jak vycentrovat velké bloky. Jednoduše nastavíte šířku kontejneru a vlastnost margin na auto. Prohlížeč umístí blok doprostřed se stejnými okraji vlevo a vpravo a veškerou práci provede sám. Díky tomu se nevystavujete riziku, že se v matematických výpočtech budete zmást a výrazně ušetříte svůj čas.

Při vývoji responzivních aplikací použijte metodu automatického okraje. Klíčem je dát kontejneru hodnotu šířky v ems nebo procentech. Kód z výše uvedeného příkladu vycentruje DIV na libovolném zařízení, včetně Mobily, zabere 90 % obrazovky.

Zarovnání pomocí zobrazení vlastnosti: inline-block

Ve výchozím nastavení jsou prvky DIV považovány za prvky bloku a mají zobrazenou hodnotu bloku. U této metody budete muset tuto vlastnost přepsat. Vhodné pouze pro DIV s nadřazeným kontejnerem:

Je přiřazen prvek s třídou external-div vlastnost text-align s hodnotou středu, která vycentruje text uvnitř. Prozatím však prohlížeč vidí vnořený DIV jako blokový objekt. Aby vlastnost text-align fungovala, musí být inner-div považováno za vložené. Takže v CSS pro selektor inner-div napíšete následující kód:

Inner-div( display: inline-block; )

Změníte vlastnost zobrazení z bloku na vložený blok.

metoda transformace/překladu

Kaskádové styly umožňují libovolně přesouvat, zkosit, otáčet a transformovat prvky webu. K tomu se používá vlastnost transform. Požadovaný typ transformace a stupeň jsou specifikovány jako hodnoty. V tento příklad budeme pracovat s překladem:

transform: translate(50%, 50%);

Funkce překladu přesune prvek z jeho aktuální pozice doleva/doprava a nahoru/dolů. V závorkách se předávají dvě hodnoty:

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

Pokud je třeba prvek posunout pouze podél jedné ze souřadnicových os, zadáte za slovem přeložit název osy a v závorkách velikost požadovaného posunu:

Transform: translateY(-20%);

V některých průvodcích můžete vidět 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 podporují všechny prohlížeče včetně Edge a IE.

Abychom vycentrovali DIV, který potřebujeme, je funkce translate CSS zapsána s hodnotou 50 % pro vertikální a horizontální osu. To způsobí, že prohlížeč přesune prvek z jeho aktuální pozice na polovinu jeho šířky a výšky. Vlastnosti šířka a výška musí být specifikovány:

Mějte na paměti, že prvek, na který je aplikována vlastnost transform, se pohybuje bez ohledu na objekty, které jej obklopují. Na jednu stranu je to pohodlné, ale někdy může pohyb DIV překrývat jiný kontejner. Proto je tento způsob centrování webových komponent považován za nestandardní a používá se pouze v případech krajní nutnosti. K animaci se používají transformace podle všech kánonů CSS.

Práce s rozložením Flexbox

Flexbox je zvažován složitým způsobem rozložení webu. Ale pokud to zvládnete, pochopíte, že je to mnohem jednodušší a příjemnější než standardní způsoby formátování. Specifikace Flexbox je flexibilní a neuvěřitelně výkonný způsob manipulace s prvky. Z anglického jazyka Název modulu je přeložen jako „flexibilní kontejner“. Hodnoty šířky, výšky, uspořádání prvků se upravují automaticky, bez výpočtu odsazení a okrajů.

V předchozích příkladech jsme již pracovali s vlastností display, ale nastavili jsme ji na hodnoty block (block) a inline (inline-block). K vytvoření flex layoutů použijeme display: flex. Nejprve potřebujeme flex kontejner:

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

Flex-kontejner (displej: flex;)

Všechny objekty v něm vnořené, ale pouze přímé potomky, budou flexibilní položky:

Pokud je seznam umístěn do flexibilního kontejneru, pak položky v seznamu li nejsou považovány za flexibilní položky. Rozvržení Flexbox bude fungovat pouze na ul:

Pravidla pro umisťování pružných předmětů

Ke správě flexibilních položek potřebujete justify-content a align-items. V závislosti na hodnotách, které zadáte, tyto dvě vlastnosti automaticky umístí objekty podle potřeby. Pokud potřebujeme vycentrovat všechny vnořené DIV, napíšeme justify-content: center, align-items: center a nic jiného. Prohlížeč udělá zbytek práce:

Chcete-li vycentrovat text na prvky DIV, které jsou flexibilními položkami, můžete použít standardní trik pro zarovnání textu. Nebo můžete z každého vnořeného DIV vytvořit flexibilní kontejner a spravovat obsah pomocí justify-content . Tato metoda je mnohem racionálnější, pokud obsahuje různorodý obsah včetně grafiky, dalších vnořených objektů včetně víceúrovňových seznamů.

Lze provádět horizontální a vertikální zarovnání prvků různé způsoby. Volba metody závisí na typu prvku (blok nebo inline), na typu jeho umístění, velikosti atd.

1. Vodorovné zarovnání na střed bloku / stránky

1.1. Pokud má blok šířku:

div ( šířka: 300px; okraj: 0 auto; /*vystředit prvek vodorovně v rámci nadřazeného bloku*/ )

Pokud chcete zarovnat vložený prvek tímto způsobem, musíte jej nastavit na display: block;

1.2. Pokud je blok vnořen do jiného bloku a má pro něj nastaveno ne/šířka:

.wrapper(text-align:center;)

1.3. Pokud má blok šířku a je třeba jej upevnit ve středu nadřazeného bloku:

.wrapper (pozice: relativní; /*nastaví nadřazený rámeček na relativní pozici, abychom mohli později rámeček do něj absolutně umístit*/) .box ( šířka: 400px; pozice: absolutní; vlevo: 50 %; margin-left: - 200px; / *posune blok doleva o vzdálenost rovnající se polovině jeho šířky*/ )

1.4. Pokud není pro bloky nastavena žádná šířka, můžete je vycentrovat pomocí nadřazeného bloku obalu:

.wrapper (text-align: center; /*vycentrovat obsah bloku*/) odsazení mezi bloky*/ )

2. Vertikální zarovnání

2.1. Pokud text zabírá jeden řádek, například pro tlačítka a položky nabídky:

.button ( výška: 50px; výška řádku: 50px; )

2.2. Jak zarovnat blok svisle uvnitř nadřazeného bloku:

.wrapper (pozice: relativní;) .box ( výška: 100px; pozice: absolutní; nahoře: 50%; okraj: -50px 0 0 0; )

2.3. Vertikální zarovnání podle typu tabulky:

.wrapper ( display: table; width: 100%; ) .box ( display: table-cell; height: 100px; text-align: center; vertical-align: middle; )

2.4. Pokud má rámeček nastavenou šířku a výšku a je třeba jej vycentrovat na nadřazený rámeček:

.wrapper ( pozice: relativní; ) .box ( výška: 100px; šířka: 100px; pozice: absolutní; nahoře: 0; vpravo: 0; dole: 0; vlevo: 0; okraj: auto; přetečení: auto; /*to obsah se nerozšířil */ )

2.5. Absolutní umístění do středu stránky/bloku pomocí transformace CSS3:

pokud má prvek rozměry

div ( šířka: 300px; /*nastavit šířku bloku*/ výšku:100px; /*nastavit výšku bloku*/ transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50% ;)

pokud prvek nemá žádné rozměry a není prázdný

h1 ( okraj: 0; transformace: přeložit (-50 %, -50 %); pozice: absolutní; nahoře: 50 %; vlevo: 50 %; )

Zdálo by se, že není nic složitého nastavit obrázek nebo text do středu okna prohlížeče. Používáme značku CENTER a vše zapadá na místo, kam jsme zamýšleli. Nicméně, ne všechno tak jednoduché. Existují tři způsoby zarovnání na střed, z nichž každý má své vlastní vlastnosti a rozdíly v různých prohlížečích.

Jeden z nejjednodušších a nejpohodlnějších tagů - CENTER je určen k zarovnání bloku textu. Tento štítek lze také použít k vystředění obrázků a tabulek. Výjimkou jsou prvky nebo u kterého je zarovnání nastaveno vlastnostmi tagu IMG. Pokud tedy umístíme prvek uvnitř značky CENTER bude obrázek zarovnán doprava.

Příklad 4.1. Centrování pomocí značky CENTER

Tento text bude zarovnán na střed okna prohlížeče a pod něj
kresba na pravé straně.

Formálně by se CENTER měl používat pouze jako parametr pro ostatní tagy bloku (P, PRE a další). V prohlížeči Netscape Navigator 2.0 byl však CENTER představen jako samostatný tag. Účelem tohoto přidání bylo odstranit nadbytečné vertikální odsazení, které se objevuje při použití značek bloků. Pokud je místo značky CENTER text umístěn uvnitř odstavce (

) , mezi nimi je další svislá odrážka vodorovná čára a tento text.

CENTER není součástí specifikace HTML. V "oficiálním" HTML formátování, jako je zarovnání textu by mělo být provedeno prostřednictvím atributů značek (např.

) nebo pomocí stylů. Přesto tato značka získala právo na existenci. Od vydání specifikace HTML 4 W3 však konsorcium doporučuje vyhnout se použití značky CENTER a že prvek

, jak je znázorněno v příkladu 4.2.

Příklad 4.2. Centrování pomocí značky DIV

---

Dalším způsobem, jak vycentrovat, je použití stylů. Styly jsou pokyny, které vám umožňují ovládat atributy formátování, jako je písmo, barva, zarovnání atd. Příklad předefinování značky P na střed textu.

Příklad 4.3. Centrování pomocí stylů

Nyní, když použijete značku P s výše uvedeným
stylu, text odstavce bude zarovnán na střed okna prohlížeče

Středové prvky svisle s pomocí CSS je úkol, který pro vývojáře představuje určitou obtíž. Existuje však několik metod, jak to vyřešit, které jsou docela jednoduché. Tato lekce představuje 6 možností pro vertikální centrování obsahu.

Začněme s obecný popisúkoly.

Problém s vertikálním centrováním

Horizontální centrování je velmi jednoduché a snadné. Když je prvek, který je vystředěn, vložený, použijte vlastnost relativního zarovnání nadřazený prvek. Když je prvkem blokový prvek, nastavíme jeho šířku a automatická instalace levý a pravý okraj.

Většina lidí při použití vlastnosti text-align: odkazuje na vlastnost vertical-align pro vertikální centrování. Vše vypadá celkem logicky. Pokud jste používali šablony tabulek, pravděpodobně jste hojně používali atribut valign, což posiluje přesvědčení, že vertikální zarovnání je tou správnou cestou.

Ale atribut valign funguje pouze na buňkách tabulky. A vlastnost vertical-align je velmi podobná. Ovlivňuje také buňky tabulky a některé vložené prvky.

Hodnota vlastnosti vertical-align je relativní k rodičovskému vloženému prvku.

• V řádku textu je zarovnání relativní k výšce řádku.
• Buňka tabulky používá zarovnání s ohledem na hodnotu vypočítanou speciálním algoritmem (obvykle se získá výška řádku).

Ale bohužel vlastnost vertical-align nefunguje na prvcích na úrovni bloku (jako jsou odstavce uvnitř prvku div). Tato situace může vést k myšlence, že problém vertikálního vyrovnání neexistuje.

Existují však i jiné metody centrování prvků na úrovni bloku, jejichž výběr závisí na tom, co se centruje vzhledem k vnějšímu kontejneru.

metoda výšky čáry

Tato metoda funguje, když chcete svisle vycentrovat jeden řádek textu. Jediné, co musíte udělat, je nastavit výšku řádku tak, aby byla větší než velikost písma.

Ve výchozím nastavení bude volné místo rozmístěno rovnoměrně nad a pod textem. A čára bude svisle vycentrována. Často se výška čáry rovná výšce prvku.

HTML:

CSS:

#child ( výška řádku: 200px; )

Tato metoda funguje ve všech prohlížečích, i když ji lze použít pouze pro jeden řádek. Hodnota 200 px v příkladu je zvolena libovolně. Můžete použít libovolnou hodnotu větší, než je velikost písma textu.

Vystředění obrázku s výškou čáry

Co když je obsahem obrázek? Bude výše uvedená metoda fungovat? Odpověď spočívá v jiném řádku kódu CSS.

HTML:

CSS:

#parent ( line-height: 200px; ) #parent img ( vertical-align: middle; )

Hodnota vlastnosti line-height musí být větší než výška obrázku.

Metoda tabulky CSS

Jak již bylo zmíněno výše, vlastnost vertical-align se vztahuje na buňky tabulky, kde funguje skvěle. Náš prvek můžeme vykreslit jako buňku tabulky a použít na ní vlastnost vertical-align k vertikálnímu vystředění obsahu.

Poznámka: CSS tabulka není totéž jako HTML tabulka.

HTML:

CSS:

#parent (display: table;) #child ( display: table-cell; vertical-align: middle; )

Nastavíme výstup tabulky na rodičovský div a vykreslíme vnořený div jako buňku tabulky. Nyní můžete použít vlastnost vertical-align na vnitřním kontejneru. Vše v něm bude vertikálně vycentrováno.

Na rozdíl od výše uvedené metody může být v tomto případě obsah dynamický, protože velikost prvku div se přizpůsobí jeho obsahu.

Nevýhodou této metody je, že nefunguje ve starších verzích IE. Pro vnořený kontejner musíte použít vlastnost display: inline-block.

Absolutní umístění a záporné okraje

Tato metoda funguje také ve všech prohlížečích. Vyžaduje však, aby centrovanému prvku byla dána výška.

Ukázkový kód provádí horizontální i vertikální centrování současně:

HTML:

CSS:

#rodič (pozice: relativní;) #dítě ( pozice: absolutní; nahoře: 50 %; vlevo: 50 %; výška: 30 %; šířka: 50 %; okraj: -15 % 0 0 -25 %; )

Nejprve nastavíme typ umístění prvků. Poté na vnořeném prvku div nastavte vlastnosti top a left na 50 %, což je střed nadřazeného prvku. Ale centr trefuje levou stranu horním rohu vnořený prvek. Proto jej musíte zvednout (polovina výšky) a posunout doleva (polovina šířky), a pak se střed bude shodovat se středem nadřazeného prvku. Znalost výšky prvku je tedy v tomto případě nezbytná. Potom dáme prvku záporný horní a levý okraj rovný polovině výšky a šířky.

Tato metoda nefunguje ve všech prohlížečích.

Absolutní polohování a protahování

Příklad kódu provádí vertikální a horizontální centrování.

HTML:

CSS:

#rodič (pozice: relativní;) #dítě ( pozice: absolutní; nahoře: 0; dole: 0; vlevo: 0; vpravo: 0; šířka: 50 %; výška: 30 %; okraj: auto; )

Myšlenkou této metody je roztáhnout vnořený prvek na všechny 4 okraje nadřazeného prvku nastavením vlastností top, bottom, right a left na 0.

Nastavení automatického vytváření okrajů na všech stranách povede k úkolu stejné hodnoty na všech 4 stranách a přenese náš vnořený prvek div do středu nadřazeného prvku.

Bohužel tato metoda nefunguje v IE7 a nižších.

Stejné polstrování nahoře a dole

Tato metoda explicitně nastaví stejnou výplň nad a pod nadřazeným prvkem.

HTML:

CSS:

#rodič (výplň: 5 % 0; ) #dítě (výplň: 10 % 0; )

V kódu Příklad CSS pro oba prvky jsou nastaveny horní a dolní okraje. U vnořeného prvku bude nastavení výplně sloužit k jeho vertikálnímu vystředění. A odsazení nadřazeného prvku v něm vycentruje vnořený prvek.

Relativní jednotky se používají k dynamické změně velikosti prvků. A pro absolutní jednotky měření budete muset provést výpočty.

Pokud je například nadřazený prvek vysoký 400 pixelů a vnořený prvek je vysoký 100 pixelů, pak je nahoře a dole vyžadováno odsazení 150 pixelů.

150 + 150 + 100 = 400

Použití % umožňuje ponechat výpočty na prohlížeči.

Tato metoda funguje všude. Nevýhodou je nutnost výpočtů.

Poznámka: Tato metoda funguje nastavením okraje prvku. Můžete také použít okraje v rámci prvku. Rozhodnutí použít okraje nebo výplň by mělo být učiněno v závislosti na specifikách projektu.

plovoucí div

Tato metoda používá prázdný prvek div, který se vznáší a pomáhá řídit pozici našeho vnořeného prvku v dokumentu. Všimněte si, že plovoucí prvek div je v kódu HTML umístěn před naším vnořeným prvkem.

HTML:

CSS:

#parent (výška: 250px;) #floater (plovoucí: vlevo; výška: 50%; šířka: 100%; margin-bottom: -50px; ) #child (clear: both; height: 100px; )

Prázdný prvek div odsadíme doleva nebo doprava a dáme mu výšku 50 % nadřazeného prvku. Tímto způsobem vyplní horní polovinu nadřazeného prvku.

Protože je tento prvek div plovoucí, je odstraněn z normálního toku dokumentu a musíme rozvinout vnořený prvek. V příkladu je použito clear: both , ale stačí použít stejný směr jako offset plovoucího prázdného prvku div.

Horní okraj vnořeného prvku div je přímo pod spodním okrajem prázdného prvku div. Potřebujeme posunout vnořený prvek nahoru o polovinu výšky plovoucího prázdného prvku. K vyřešení problému se používá záporná hodnota vlastnosti margin-bottom pro plovoucí prázdný prvek div.

Tato metoda funguje také ve všech prohlížečích. Jeho použití však vyžaduje další prázdný prvek div a znalost výšky vnořeného prvku.

Závěr

Všechny popsané metody jsou snadno použitelné. Potíž spočívá v tom, že žádný z nich není vhodný pro všechny případy. Je potřeba analyzovat projekt a vybrat ten, který nejlépe vyhovuje požadavkům.