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:

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é. Proto v CSS tabulka 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 tomto příkladu budeme pracovat s překladem:

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

Uvažuje se o Flexboxu 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 umístění flex položek

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ů.

Každý návrhář rozvržení se neustále potýká s potřebou zarovnat obsah do bloku: vodorovně nebo svisle. Existuje několik dobrých článků na toto téma, ale všechny nabízejí mnoho zajímavých, ale málo praktických možností, a proto musíte ztrácet čas, abyste zdůraznili to hlavní. Rozhodl jsem se, že tyto informace podám ve formě, která mi vyhovuje, abych už negoogloval.

Zarovnání bloků se známými velikostmi

Nejjednodušší způsob použití CSS je zarovnat rámečky, které mají předem stanovenou výšku (pro vertikální zarovnání) nebo šířku (pro horizontální zarovnání).

Zarovnání s vycpávkou

Někdy nemůžete prvek vycentrovat, ale přidat k němu ohraničení pomocí vlastnosti " vycpávka".

Například existuje obrázek 200 x 200 pixelů a chcete jej vycentrovat do bloku 240 x 300. Můžeme nastavit výšku a šířku venkovní jednotka= 200 pixelů a přidejte 20 pixelů pro horní a dolní část a 50 pro levou a pravou stranu.

Zarovnání absolutně umístěných bloků

Pokud je blok nastaven na " pozice: absolutní", pak jej lze umístit relativně k nejbližšímu rodiči pomocí "pozice: relativní". K tomu jsou všechny vlastnosti (" horní","že jo","dno","vlevo, odjet") vnitřního bloku pro přiřazení stejné hodnoty, stejně jako "margin: auto".

*Je zde nuance: Šířka (výška) vnitřního bloku + hodnota vlevo (vpravo, dole, nahoře) nesmí překročit velikost nadřazeného bloku. Bezpečnější je nastavit vlastnosti left (right, bottom, top) na 0 (nula).

Horizontální zarovnání

Zarovnání pomocí "text-align: center"

Chcete-li zarovnat text do bloku, existuje speciální vlastnost " zarovnání textu". Při nastavení na " centrum" každý řádek textu se zarovná vodorovně. Pro víceřádkový text toto řešení se používá velmi zřídka, častěji lze tuto možnost nalézt pro zarovnání rozpětí, odkazů nebo obrázků.

Jednou jsem musel vymyslet text, abych ukázal, jak kdy funguje zarovnání textu Nápověda CSS ale nic zajímavého mě nenapadlo. Nejprve jsem se rozhodl někde zkopírovat říkanku, ale vzpomněl jsem si, že by to mohlo zkazit jedinečnost článku a naši milí čtenáři by ho na Googlu nenašli. A pak jsem se rozhodl napsat sem tento odstavec - koneckonců pointa není u něj, ale pointa je v zarovnání.

Stojí za zmínku, že tato vlastnost bude fungovat nejen pro text, ale také pro všechny vložené prvky ("display: inline").

Ale tento text je zarovnán doleva, ale je v bloku, který je vystředěn vzhledem k obalu.

Zarovnání bloků s okraji

Prvky na úrovni bloku se známou šířkou se snadno vodorovně zarovnají nastavením na "margin-left: auto; margin-right: auto". Obvykle se používá zkratka: " okraj: 0 auto" (místo nuly může být jakákoli hodnota). Ale pro vertikální zarovnání tato metoda nebude fungovat.

Takto se vyplatí zarovnat všechny bloky, kde je to možné (tam, kde není vyžadováno pevné nebo absolutní umístění) - je to nejlogičtější a nejpřiměřenější. I když se to zdá samozřejmé, občas jsem viděl zastrašující příklady se zápornými odrážkami, tak jsem si řekl, že to objasním.

Vertikální zarovnání

S vertikálním zarovnáním je mnohem více problémů - zjevně to nebylo v CSS zajištěno. Existuje několik způsobů, jak dosáhnout požadovaného výsledku, ale všechny nejsou příliš krásné.

Zarovnání s vlastností line-height

V případě, že je v bloku pouze jedna čára, můžete dosáhnout jeho vertikálního zarovnání použitím " výška čáry" a jeho nastavení na požadovanou výšku. Pro jistotu byste měli nastavit také "height", jehož hodnota se bude rovnat hodnotě "line-height", protože ta není podporována ve všech prohlížečích.

Je také možné zarovnat blok s více čarami. Chcete-li to provést, budete muset použít další blok obalu a nastavit mu výšku řádku. Vnitřní blok může být víceřádkový, ale musí být „inline“. Musíte na něj použít „vertical-align: middle“.

Obalový blok musí mít nastavenou "velikost písma: 0". Pokud velikost písma nenastavíte na nulu, prohlížeč přidá pár pixelů navíc. Budete také muset určit velikost písma a výšku řádku pro vnitřní blok, protože tyto vlastnosti se dědí od nadřazeného bloku.

Vertikální zarovnání v tabulkách

Vlastnictví " svisle zarovnat" ovlivňuje i buňky tabulky. S hodnotou nastavenou na "middle" je obsah uvnitř buňky vycentrován. Tabulkové rozvržení je dnes samozřejmě považováno za archaické, ale ve výjimečných případech jej lze simulovat zadáním " displej: tabulka-buňka".

Tuto možnost obvykle používám pro vertikální zarovnání. Níže je uveden příklad rozvržení převzatého z hotového projektu. Zajímavý je obrázek, který je takto vertikálně vycentrován.

Je třeba pamatovat na to, že pokud má prvek nastaven jiný "float" než "none", pak bude mít i tak tvar bloku (zobrazení: blok) - pak budete muset použít další obal bloku.

Zarovnání s dalším vloženým prvkem

A pro vložené prvky můžete použít " svisle zarovnat: na střed". V tomto případě všechny prvky s " displej: inline", které jsou na stejné čáře, se zarovnají se společnou středovou čarou.

Musíte vytvořit pomocný blok s výškou rovnou výšce nadřazeného bloku, poté bude požadovaný blok vycentrován. K tomu je vhodné použít pseudoelementy:before nebo:after.

Displej: flex a zarovnání

Pokud se o uživatele Exploreru 8 příliš nestaráte nebo vám na nich záleží natolik, že jste ochotni pro ně vložit kus javascriptu navíc, můžete použít „display: flex“. Flex boxy zvládají problémy se zarovnáním opravdu dobře a pro vycentrování obsahu uvnitř stačí napsat „margin: auto“.

Zatím mě tato metoda prakticky nikdy nepotkala, ale žádná zvláštní omezení pro ni nejsou.

No a to je vše, o čem jsem chtěl napsat CSS zarovnání. Centrování obsahu nyní nebude problém!

Často je v praxi nutné řešit problém seskupování a zarovnávání obsahu pomocí CSS. Dnes se podíváme na hlavní způsoby uspořádání prvků v horizontální řadě.

Materiál tohoto článku má pomoci začínajícím webdesignérům osvojit si techniky rozvržení webových stránek.

Co si vybrat nebo metody

Existuje několik způsobů, jak uspořádat konstrukční prvky v řadě v horizontální rovině. nejužitečnější z hlediska praktická aplikace, jsou:

• "Float" metoda
• Metoda "Inline block".
• metoda tabulka-buňka

Každý z nich má své výhody, aplikace a nevýhody. Zvažme je v pořadí.

"Pro blbce" nebo trochu teorie

Vše strukturální HTML prvky lze podmíněně rozdělit na:

V souladu(vestavěný) - typ img, rozpětí a podobně. Nemáme možnost změnit jejich pozadí a dát jim libovolné lineární rozměry.

Blok– zabírající celou šířku nadřazeného bloku, vždy začněte s nový řádek – p, h, div.

Názorný příklad inline a blokových struktur je uveden níže:

Float metoda

Jak již bylo známo (viz výše), prvek bloku je umístěn na nový řádek bez ohledu na šířku, která je pro něj určena ( šířka). Proto zmenšení horizontální velikosti div-a, nemůžete stavět bloky v řadě.

Nejoblíbenější (zejména mezi začínajícími dispozičními designéry) způsob řešení je využití nemovitosti plovák.

Vlastnost CSS plovák získal velkou oblibu a praktickou hodnotu po přechodu z tabulkového uspořádání na blokové.

Plovák: vlevo (vpravo) transformuje prvek na úrovni bloku na plovoucí, zarovná jej k levému (pravému) okraji nadřazeného bloku a nastaví obtékání vpravo (vlevo) textu a dalších prvků.

Vytvořme například čtyři bloky, které je třeba umístit do řady:

< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" >Stavíme < div class = "bblock" >horizontální < div class = "bblock" >řádek < div class = "bblock" >od divas

A externí šablonu stylů s následujícím obsahem:

div(float:left; /*Nastavit balení*/ line-height: 120px; velikost písma: 40px; pozadí: dodgerblue; barva bílá; margintop: 60px; šířka: 320px /*Opravit šířku bloku*/ }

Výsledkem jsou čtyři bloky uspořádané v horizontální řadě a zarovnané k levému okraji nadřazeného bloku:

Někdy je v praxi nutné zarovnat bloky k pravému okraji nadřazeného prvku. Změňme obalování bloků v předchozím příkladu:

plovák:pravý;

Věnujte pozornost nápisům umístěným v blocích. Na první pohled se může zdát, že příklad fungoval nakřivo. Ale ve skutečnosti prohlížeč zpracoval kód správně: přečetl bloky shora dolů a udělal to, co jsme od něj požadovali – zarovnáno vpravo. Mějte to na paměti při užívání nemovitosti plovák:vpravo.

Chcete-li zastavit tok prvků z určitého místa, použijte řádek:

< div style= "clear: both;" >

Ve výše uvedeném příkladu nastavíme vzdálenost mezi bloky pomocí odsazení okraj-pravý. Co když ale máte při rozvržení stránky úkol: umístit bloky do řady, vycentrovat je a dokonce tak, aby odsazení bylo pouze mezi nimi, ale ne mimo?

Algoritmus akcí je následující.

< div class = "wrap" > < div class = "bblock" >Stavíme < div class = "bblock" >horizontální < div class = "bblock" >řádek < div class = "bblock" >od divas

wrap(width: 1310px; /*opravit šířku obalu*/ okraj: 0 auto; /*vycentrovat*/ pozadí: darkgray; výška: 120px; /*Nastavit výšku obalu*/). bblock (plovoucí: vlevo; /*Nastavit balení*/ line-height: 120px; /*Výška řádku + vert. centrování textu*/ velikost písma: 40px; pozadí: dodgerblue; barva bílá; šířka: 320px /*Opravit šířku bloku*/ pravý okraj: 10px; text-align: center; /*Vycentrujte text vodorovně*/). wrap : last-child ( margin-right: 0px; /*Odstranit okraj posledního div*/ }

V důsledku toho dostaneme následující obrázek:

Nemůžete zvážit všechny praktické situace, takže přejděme k obecným funkcím.

Důležité!!!

Inline bloková metoda

Inline i blokové prvky mají své výhody a nevýhody v kontextu každého konkrétního řešeného úkolu. Ale co když spojíme jejich výhody?

Seznamte se s vrcholem programu - vlastností displej: inline-block.

displej: inline-block vygeneruje prvek block-inline, který je v podstatě inline, ale zachovává vlastnosti bloku – umožňuje měnit lineární rozměry, nastavovat okraje, odsazení atd.

Vložený prvek bloku má následující vlastnosti:

• výška a šířka bloku je určena automaticky podle obsahu a hodnoty odsazení ( vycpávka)
• výšku a šířku bloku lze nastavit
• Neexistuje žádný efekt srážení hranic.

Zvažte příklad vytvoření jednoduchého navigační menu A obsahující obrázek a odkaz.

< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Odkaz na nabídku 1 je delší než obvykle < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Odkaz na menu 2 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Odkaz na menu 3 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Odkaz na menu 4

Nav ( displej: inline-block; /*Nastavit zobrazení blokového řádku*/šířka: 180px /*nastavit šířku bloku*/ pozadí: dodgerblue; ). string(text-align: center; /*Zarovnat text vodorovně*/ }

Výsledkem je následující nabídka:

Jak vidíte, dopadlo to křivě ... Ale nehodláme se rozčilovat, a tak na naše divy aplikujeme vlastnost CSS svisle zarovnat(podrobnosti viz níže):

svisle zarovnat: nahoře;

Náš navigační panel je nyní zarovnán k hornímu řádku:

Uvedený příklad je samozřejmě primitivní, ale jsem si jist, že na jeho základě můžete vytvořit skutečné mistrovské dílo!!!

Důležité!!!

• Pro starce verze Firefoxu přidat řádek:
  

  zobrazení: -moz-inline-stack;

  
  a zabalte prvek do dalšího obalu div.
• IE 7 a starší - přidejte řádky:
  

  zoom: 1 /*set hasLayout*/ * display: inline; /*hvězdička - hack pro IE */ _height: 250px; /*min-height nefunguje v IE6*/

• Podotýkám, že konkrétní prohlížeče na tyto řádky reagují selektivně (Firefox na první, IE na zbytek).

Metoda tabulky

Tabulkový přístup na dlouhou dobu byl standard rozložení, což bylo způsobeno především jednoduchostí a intuitivností označení. S největší pravděpodobností to způsobilo vzhled formátování tabulky v CSS.

Vlastnosti displej: tabulka (buňka tabulky, inline-tabulka), umožňují provádět tabulkové formátování prvků bez HTML aplikace tabulky.

Pro horizontální umístění bloků potřebujeme nadřazený prvek, který má vlastnost displej: tabulka a podřízené prvky (buňky), které mají vlastnost displej: tabulka-buňka:

< div class = "wrap" > < div class = "bblock" >Stavíme < div class = "bblock" >tabelární < div class = "bblock" >řádek < div class = "bblock" >od divas

Bblock ( displej: tabulka- buňka; velikost písma: 32px; šířka: 200px; výška: 200px; pozadí: zlatá; zarovnání textu: na střed; svislé zarovnání: na střed; ) . wrap ( display: table; border-spacing: 20px 20px; background- color: darkgrey; )

Důležité!!!

1. Na rozdíl od metod „inline-block“ a „float“ se při zmenšení šířky okna webového prohlížeče buňky neposouvají dolů.
2. Nemáte možnost nastavit vlastnost margin pro buňky pseudotabulky.
3. Křížový prohlížeč. Vlastnosti ze zobrazení: rodina table* nejsou podporovány IE6, IE7. V IE8 také můžete vidět chybu dynamického vykreslování pro prvky pseudotabulky jako náhodně mizející buňky. Tato chyba nejčastěji se projevuje při prvotním kreslení dokumentu

Dobrý den, předplatitelé a čtenáři této publikace. Dnes chci jít do detailů a říct vám, jak vycentrovat text v css. V některých předchozích článcích jsem se tohoto tématu nepřímo dotkl, takže nějaké znalosti v této oblasti máte.

V tomto příspěvku vám však povím o všemožnými způsoby zarovnání objektů a vysvětlí, jak odsadit a znovu podtrhnout odstavce. Pojďme se tedy začít učit!

Html a jeho potomci a zarovnat

Tato metoda se téměř nikdy nepoužívá, protože byla nahrazena nástroji kaskádových stylů. Vědět, že taková značka existuje, vám však neublíží.

Co se týče validace tento výraz podrobně popsáno v článku ""), pak samotná html specifikace použití odsuzuje < střed>, protože pro platnost je nutné použít přechodník DOCTYPE>.