Horizontální a vertikální zarovnání css bloků. Zarovnání prvků

. 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 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 je například třeba blok obrázku odsadit od levého okraje ke středu o 20 %, přiřadíte prvku margin-left 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 jsou nastaveny padding a border-width, prohlížeč ve výchozím nastavení vypočítá rozměry kontejneru jako součet tloušťky ohraničení, odsazení vpravo, vlevo a samotného obsahu uvnitř, což může být také překvapením. .

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. Výše uvedený kód vycentruje DIV a na jakémkoli zařízení, včetně mobilních telefonů, 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:

Prvku s třídou external-div je přiřazena vlastnost zarovnání textu s hodnotou center, 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 tomto příkladu 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 považován za komplexní způsob rozvržení webů. 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 angličtiny je název modulu 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ů.

Obecně platí, že centrování prvků HTML na stránce není obtížný úkol. V některých případech... si weboví vývojáři musí dát hlavu do hlavy, aby našli to nejlepší řešení.

Centrovat prvky horizontálně není tak těžké, vertikálně už vyvolává otázky, ale jejich kombinování obecně může být matoucí. V éře responzivního designu málokdy známe přesné rozměry určitých prvků. Napočítal jsem 6 různých způsobů centrování prvků pomocí CSS. Začněme jednoduchými příklady a skončeme složitějšími. Bude fungovat se stejným HTML kódem:

Horizontální centrování se zarovnáním textu

Někdy je to nejjednodušší řešení nejlepší:

Div.center ( zarovnání textu: na střed; pozadí: hsl(0, 100 %, 97 %); ) div.center img ( šířka: 33 %; výška: auto; )

Není zde žádné vertikální centrování: k tomu budete muset přidat vlastnost margin-top a margin-bottom do prvku div.

Centrování s okrajem: auto

Další řešení pro horizontální centrování:

Div.center ( pozadí: hsl(60, 100 %, 97 %); ) div.center img ( displej: blok; šířka: 33 %; výška: auto; okraj: 0 auto; )

Všimněte si, že pro tuto metodu musíte nastavit vlastnost display: block.

Centrování s buňkou stolu

Pomocí display: table-cell zajistíme, aby byl prvek vycentrován jak svisle, tak vodorovně. Zde ale musíme obrázek vnořit do jiného prvku div.

Zarovnáno na střed ( display: table; background: hsl(120, 100%, 97%); width: 100%; ) .center-core ( display: table-cell; text-align: center; vertical-align: middle; ) .center-core img ( šířka: 33 %; výška: auto; )

Aby vše fungovalo správně, je třeba nastavit div na šířku: 100 %. Pro vertikální vystředění prvku použijeme standardní metody nastavením výšky. Funguje všude, včetně IE8+.

Absolutní centrování

Velmi zajímavé řešení. Spočívá v tom, že musíte nastavit výšku vnější nádoby:

Absolute-aligned ( position: relativní; min-height: 500px; background: hsl(200, 100%, 97%); ) .absolute-aligned img ( width: 50%; min-width: 200px; height: auto; overflow : auto; okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; )

Centrování s překladem

Nové řešení, kde se používají transformace CSS. Poskytuje horizontální i vertikální centrování:

Center ( background: hsl(180, 100%, 97%); position: relativní; min-height: 500px; ) .center img ( position: absolute; top: 50%; left: 50%; transform: translate(-50) %, -50 %); šířka: 30 %; výška: auto; )

Existuje několik nevýhod:

• Vlastnost transformace CSS vyžaduje předpony prohlížeče
• Nefunguje ve starších verzích IE (8 a nižších)
• Vnější nádobě je třeba dát výšku.
• Pokud je uvnitř kontejneru text, může být trochu rozmazaný.

Centrování s flex zobrazením displeje

Asi nejjednodušší varianta.

Center ( background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; ) .center img ( width: 30%; height: auto; )

Nefunguje ve všech verzích IE (ačkoli můžete být na bezpečné straně, když navíc použijete display: table-cell). Kompletní CSS:

Center ( pozadí: hsl(240, 100 %, 97 %); displej: -webkit-box; /* Safari, iOS 6 a starší; Android, starší WebKit */ displej: -moz-box; /* Firefox (může a selhání) */ displej: -ms-flexbox; /* IE 10 */ displej: -webkit-flex; /* Chrome 21+ */ displej: flex; /* Opera 12.1+, Firefox 22+ */ -webkit- box -align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz - box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; )

Centrování pomocí calc

V některých případech je tato metoda univerzálnější než použití flexboxu:

Střed ( pozadí: hsl(300, 100 %, 97 %); min-výška: 600px; pozice: relativní; ) .center img ( šířka: 40 %; výška: auto; pozice: absolutní; nahoře: calc (50 % -) 20 %); vlevo: calc (50 % - 20 %); )

Je to velmi jednoduché, můžeme si vypočítat rozměry, které potřebujeme v závislosti na celém rozložení stránky. Výpočty jsou velmi jednoduché, 50 % je středový bod kontejneru, ale naším úkolem je umístit levý horní roh obrázku na tyto souřadnice. Dále odečtěte polovinu výšky a šířky obrázku. Vzorec je:

Nahoře: calc(50% - (40%/2)); vlevo: calc(50% - (40%/2));

V praxi můžete zjistit, že tato metoda funguje dobře, pokud známe rozměry prvků:

Center img ( šířka: 500px; výška: 500px; pozice: absolutní; top:calc(50% - (300px / 2)); vlevo: calc(50% - (300px - 2)); )

Tuto metodu podporuje Firefox, od verze 4 budete muset zaregistrovat předpony prohlížeče. Nefunguje v IE 8. Celý kód:

Střed img ( šířka: 40 %; výška: auto; pozice: absolutní; nahoře: -webkit-calc(50% - 20%); vlevo: -webkit-calc(50% - 20%); nahoře: -moz-calc (50 % - 20 %); vlevo: -moz-calc (50 % - 20 %); nahoře: calc (50 % - 20 %); vlevo: calc (50 % - 20 %); )

Doufám, že tyto metody vám postačí k tomu, abyste pro sebe našli to nejlepší řešení.

Často je při rozvržení potřeba vertikální zarovnání textu v bloku. Pokud je to nutné provést v buňce tabulky, nastaví se hodnota vlastnosti CSS vertical-align.

Nabízí se však rozumná otázka, lze se obejít bez tabulky, aniž bychom přetěžovali označení stránky zbytečnými značkami? Odpověď je „můžete“, ale kvůli špatné podpoře CSS v MSIE se řešení problému bude lišit od řešení pro jiné běžné prohlížeče.

Jako příklad zvažte následující úryvek:

a pokuste se svisle zarovnat text na střed rámečku a na spodní část rámečku.

Řešení problému

"Správné" prohlížeče (včetně MSIE

Většina moderních prohlížečů podporuje CSS2.1, konkrétně hodnotu table-cell pro vlastnost display. To nám dává možnost vynutit zobrazení bloku s textem jako buňky tabulky a pomocí toho zarovnat text svisle:

div (
display:table-cell;
vertikální zarovnat: střed;
}

div (
display:table-cell;
svisle zarovnat: dole;
}

Internet Explorer (až do verze 7 včetně)

Chcete-li vyřešit problém zarovnání textu na spodní část bloku v MSIE, můžete použít absolutní umístění (zde potřebujeme inline prvek vnořený do bloku):

div (
poloha: relativní;
}
div span(
displej:blok;
pozice: absolutní;
dno: 0 %;
vlevo: 0 %
šířka: 100%
}

Tato sada pravidel funguje i ve „správných“ prohlížečích.

Zadejte vlastnosti

div span (
displej:blok;
šířka: 100%
}

nejsou vyžadovány, ale mohou být potřeba, pokud plánujete použít kromě svislého zarovnání textu také vodorovné zarovnání textu, například zarovnání textu: na střed ;.

Pro svislé zarovnání textu na střed bloku bude muset být původní fragment stále komplikovaný - uveďme ještě jeden vložený prvek:

Materiál ke studiu:

• Vertikální centrování v CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• Vertikální centrování pomocí CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• Svislé zarovnání (www.cssplay.co.uk/ie/valign.html)
• vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
• Další způsob vertikálního zarovnání v CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

V CSS se ukáže, že některé zdánlivě jednoduché věci není tak snadné udělat. Jednou z těch věcí je zarovnání, tzn. když jeden prvek potřebuje být umístěn určitým způsobem vzhledem k druhému.

Tento článek představuje některá hotová řešení, která vám pomohou zjednodušit práci centrovacích prvků horizontálně a / nebo vertikálně.

Poznámka: pod každým řešením je seznam prohlížečů s uvedením verzí, ve kterých zadaný kód CSS funguje.

CSS - Zarovnat blok na střed

1. Zarovnání jednoho bloku na střed druhého. V tomto případě mají první a druhý blok dynamické rozměry.

Rodič ( pozice: relativní; ) .child ( pozice: absolutní; vlevo: 50 %; nahoře: 50 %; -webkit-transform: translate(-50 %, -50 %); -moz-transform: translate(-50 % , -50 %); -ms-transform: translate(-50 %, -50 %); -o-transform: translate(-50 %, -50 %); transform: translate(-50 %, -50 %) ;)

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

2. Zarovnání jednoho bloku na střed druhého. V tomto případě má druhý blok pevné rozměry.

Rodič ( pozice: relativní; ) .child ( pozice: absolutní; vlevo: 50 %; nahoře: 50 %; /* šířka a výška 2 bloků */ šířka: 500px; výška: 250px; /* Hodnoty se určují v závislosti na jeho velikosti */ /* margin-left = - šířka / 2 */ margin-left: -250px; /* margin-top = - výška / 2 */ margin-top: -125px; )

Prohlížeče, které toto řešení podporují:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

3. Zarovnání jednoho bloku na střed druhého. V tomto případě má druhý blok rozměry zadané v procentech.

Rodič ( pozice: relativní; ) .child ( pozice: absolutní; /* šířka a výška pole 2 v % */ výška: 50 %; šířka: 50 %; /* Hodnoty jsou určeny na základě jeho velikosti v % */ vlevo: 25 %; /* (100 % - šířka) / 2 */ nahoře: 25 %; /* (100 % - výška) / 2 */ )

Prohlížeče, které toto řešení podporují:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

CSS - Horizontální zarovnání

1. Horizontální zarovnání jednoho prvku bloku (zobrazení: bloku) vůči druhému (ve kterém se nachází):

Blokovat (levý okraj: auto; pravý okraj: auto; )

Prohlížeče, které toto řešení podporují:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Horizontální zarovnání vloženého (zobrazení: inline) nebo inline-block (zobrazení: inline-block):

Nadřazený ( text-align: center; ) .child ( display: inline-block; )

Prohlížeče, které toto řešení podporují:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

CSS - Vertical Alignment

1. Vycentrujte jeden prvek (zobrazení: inline , display: inline-block) vzhledem k druhému (ve kterém se nachází) na střed. Rodičovský rámeček v tomto příkladu má pevnou výšku, která se nastavuje pomocí vlastnosti CSS line-height.

Parent ( line-height: 500px; ) .child ( display: inline-block; vertical-align: middle; )

Prohlížeče, které toto řešení podporují:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Svisle vystředění jednoho bloku vzhledem k druhému tak, že se nadřazený prvek zobrazí jako tabulka a potomek jako buňka této tabulky.

Nadřazený ( display: table; ) .child ( display: table-cell; vertical-align: middle; )

Prohlížeče, které toto řešení podporují:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

Pokud znáte nějaké další skvělé triky nebo užitečná řešení pro zarovnání, podělte se o ně v komentářích.