Html div centrum zarovnání. Vertikální zarovnání v div. Bonus: podmíněné komentáře

Velmi často je v layoutu nutné vycentrovat nějaký prvek horizontálně a/nebo vertikálně. Proto jsem se rozhodl udělat článek s různými způsoby centrování, aby bylo vše po ruce na jednom místě.

Okraj vodorovného zarovnání: auto

Horizontální zarovnání pomocí okraje se používá, když je známa šířka vystředěného prvku. Funguje pro blokové prvky:

Prvek (levý okraj: auto; pravý okraj: auto; šířka: 50 %; )

Zadáním auto pro pravý a levý okraj se srovnají, což vystředí prvek vodorovně v rámci nadřazeného bloku.

zarovnání textu: na střed

Tato metoda je vhodná pro centrování textu v bloku. zarovnání textu: na střed:

Zarovnání pomocí .wrapper zarovnání textu ( text-align: center; )

Jsem zarovnaný na střed

pozici a záporný okraj vlevo

Vhodné pro centrovací bloky známé šířky. Udáváme pozici nadřazeného bloku: vzhledem k poloze vzhledem k němu, polohu prvku na střed: absolutní , vlevo: 50 % a záporný okraj vlevo, jehož hodnota se rovná polovině šířky prvku:

Zarovnání pomocí position .wrapper ( pozice: relativní; ) .wrapper p ( vlevo: 50 %; okraj: 0 0 0 -100px; pozice: absolutní; šířka: 200px; )

Jsem zarovnaný na střed

zobrazení: inline-block + text-align: center

Metoda je vhodná pro zarovnání bloků neznámé šířky, ale vyžaduje rodiče obalu. Horizontální nabídku můžete například vycentrovat takto:

Zarovnání s displejem: inline-block + text-align: center;

• Domov
• .navigation ( text-align: center; ) .navigation li ( display: inline-block; )

O autorovi

Vertikální zarovnání - výška čáry

Chcete-li zarovnat jeden řádek textu, můžete použít stejné hodnoty výšky a řádkování pro nadřazený blok. Vhodné pro tlačítka, položky nabídky atd.

line-height .wrapper ( výška: 100px; line-height: 100px; )

Jsem svisle vyrovnaný

pozice a záporná marže nahoru

Wrapper ( pozice: relativní; ) prvek ( výška: 200px; okraj: -100px 0 0; pozice: absolutní; nahoře: 50 %; )

Tímto způsobem můžete pomocí umístění a záporných okrajů vycentrovat prvek na stránce.

displej: tabulka-buňka

Pro vertikální zarovnání je na prvek aplikována vlastnost display: table-cell, což jej nutí emulovat buňku tabulky. Nastavíme také jeho výšku a vertical-align: middle . Zabalme to vše do kontejneru s vlastností dislpay: table; :

Vertikální zarovnání zobrazení: table-cell .wrapper ( display: table; width: 100%; ) .cell ( display: table-cell; height: 100px; vertical-align: middle; )

line-height .wrapper ( výška: 100px; line-height: 100px; )

Dynamické zarovnání prvku na stránce

Podívali jsme se na způsoby, jak zarovnat prvky na stránce pomocí CSS. Nyní se podívejme na implementaci jQuery.

Pojďme připojit jQuery ke stránce:

Navrhuji napsat jednoduchou funkci pro vycentrování prvku na stránce, nazvěme ji alignCenter() . Samotný prvek funguje jako argument funkce:

Funkce alignCenter(elem) ( // kód zde )

V těle funkce dynamicky vypočítáme a přiřadíme souřadnice středu stránky vlastnostem CSS left a top:

Funkce alignCenter(elem) ( elem.css(( vlevo: ($(window).width() - elem.width()) / 2 + "px", nahoře: ($(window).height() - el. height()) / 2 + "px" // nezapomeňte k prvku přidat position: absolute pro spuštění souřadnic )) )

V prvním řádku funkce získáme šířku dokumentu a odečteme od ní šířku prvku, rozdělenou na polovinu - to bude vodorovný střed stránky. Druhý řádek dělá to samé, pouze s výškou pro vertikální zarovnání.

Funkce je připravena, zbývá ji pouze připojit k událostem připravenosti DOM a změně velikosti okna:

$(function() ( // volání funkce centrování, když je DOM připraven alignCenter($(elem)); // volání funkce při změně velikosti okna $(window).resize(function() ( alignCenter($(elem) )); )) // funkce centrování prvku alignCenter(elem) ( elem.css(( // výpočet souřadnic vlevo a nahoře vlevo: ($(window).width() - elem.width()) / 2 + " px", top: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Aplikace Flexboxu

Nové funkce CSS3, jako je Flexbox, se postupně stávají běžnými. Tato technologie pomáhá vytvářet značky bez použití plováků, polohování atd. Lze jej také použít k vystředění prvků. Například použijte Flexbox na nadřazený element.wrapper a vycentrujte obsah uvnitř:

Wrapper ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; výška: 500px; šířka: 500px; ) .wrapper .content ( okraj: auto; /* okraj: 0 pouze vodorovný */ /* okraj: pouze svislý */ ) Lorem ipsum dolor sit amet

Toto pravidlo vycentruje prvek vodorovně i svisle zároveň - margin nyní funguje nejen pro horizontální zarovnání, ale i pro vertikální. A bez známé šířky/výšky.

Související zdroje Pomozte projektu

Weboví designéři používají DIV při své práci každý den. Bez jakéhokoli podceňování je to nejoblíbenější značka. Otevřete zdrojový kód libovolné webové stránky a uvidíte, že většina, ne-li dvě třetiny objektů, jsou uzavřeny v . Dokonce i s příchodem HTML5 a se vznikem vážných konkurentů ve formě článku nebo záhlaví se nadále všude vkládá do značek. Proto doporučuji, abyste pochopili problém formátování a centrování bloků div.

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 – class a id. Na všechny ostatní si vzpomenete jen v exotických případech, a to není pravda. Atribut align, který se dříve používal k zarovnání divů na střed nebo doleva, byl zastaralý.

Kdy použít DIV

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

Otevřete libovolnou webovou stránku a rozdělte ji do smysluplných bloků. Záhlaví nahoře, zápatí dole, hlavní text uprostřed. Na boku bývá menší sloupec s reklamním obsahem nebo tag cloud.

Dokument

Nyní se podívejte na 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. Přiřaďte každému sémantickému bloku vlastní kontejner. To nejen oddělí prvky v toku, ale také usnadní jejich formátování. Zjistíte, že je mnohem snazší vycentrovat objekt ve značce DIV, když mu přidělíte třídu nebo ID.

Centrování DIV pomocí okrajů

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

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

Tyto vlastnosti přidávají prostor mezi objekty a pomáhají vám je správně zarovnat a umístit. Pokud je například potřeba posunout blok s obrázkem 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ďme absolutní pozici a posuňte jej do středu o 50 %.

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

Nyní, abychom zajistili, že je vycentrovaný DIV umístěn perfektně, dáme mu doleva záporný okraj rovný 50 % jeho šířky, tedy -100 pixelů:

Levý okraj: -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 zadány hodnoty padding a border-width, prohlížeč ve výchozím nastavení vypočítá rozměry kontejneru jako součet tloušťky okrajů, odsazení vpravo a vlevo a samotného obsahu uvnitř, což může také přijít jako překvapení.

Takže když potřebujete vycentrovat DIV, použijte vlastnost box-sizing s hodnotou border-box. To zabrání prohlížeči přidávat hodnoty odsazení a ohraničení k celkové šířce prvku DIV. Chcete-li zvýšit nebo snížit prvek, použijte také záporné hodnoty. Ale v tomto případě je lze přiřadit 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 přiřadíte šířku kontejneru a vlastnost margin na auto. Prohlížeč umístí doprostřed blok se stejnými okraji vlevo a vpravo a veškerou práci provede sám. Nehrozí vám tak záměna v matematických výpočtech a výrazně šetří váš čas.

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

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

Ve výchozím nastavení jsou prvky DIV považovány za blokové prvky a jejich zobrazovaná hodnota je blok. U této metody budete muset tuto vlastnost přepsat. Vhodné pouze pro DIV s nadřazeným kontejnerem:

Jakýkoli text

Prvku s třídou external-div je přiřazena vlastnost text-align 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 internal-div považováno za malá písmena. Takže do tabulky CSS pro selektor inner-div zapíš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 jinak transformovat prvky webu. K tomu slouží vlastnost transform. Hodnoty označují požadovaný typ a stupeň transformace. 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 jsou předány 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, pak za slovem přeložit uveďte název osy a v závorkách velikost požadovaného posunutí:

Transform: translateY(-20%);

V některých příručkách můžete nají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 je podporována všemi prohlížeči, včetně Edge a IE.

Aby bylo možné vycentrovat požadovaný DIV, je funkce překladu CSS zapsána s hodnotou 50 % pro svislou a vodorovnou osu. To způsobí, že prohlížeč odsadí prvek od jeho aktuální pozice o polovinu jeho šířky a výšky. Vlastnosti šířka a výška musí být specifikovány:

Document .nav-bar( display: block; width: 90%; height: 100vh; margin: 0 auto; background: linear-gradient(do left, red, #f06d06); ) .navigation( width: 50%; height: 50% barva: #FFF; 1px přerušovaná #F5F2F2;

Mějte na paměti, že prvek, na který je aplikována vlastnost transform, se pohybuje nezávisle na objektech, které jej obklopují. Na jednu stranu je to pohodlné, ale někdy při přesunu může 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. Pro animaci se používají transformace podle všech kánonů CSS.

Práce s rozložením Flexbox

Flexbox je považován za sofistikovaný způsob, jak navrhovat webové rozvržení. Pokud ho ale zvládnete, uvědomíte si, že je 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. Název modulu je přeložen z angličtiny jako „flexibilní kontejner“. Hodnoty šířky, výšky a 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 a inline-block. Pro 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 vnořené objekty, ale pouze přímí potomci, budou flexibilními prvky:

První Druhý Třetí Čtvrtý

Pokud umístíte seznam do kontejneru flex, pak položky seznamu li nejsou považovány za prvky flex. Rozvržení Flexbox bude fungovat pouze na ul:

Pravidla pro umístění flex prvků

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 sám:

Document .flex-container( display: flex; justify-content: center; align-items: center; ) First Second Third Fourth

Chcete-li vycentrovat text na prvky DIV, které jsou flexibilními položkami, můžete použít standardní techniku ​​zarovnání textu. Nebo můžete z každého vnořeného DIV vytvořit také 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ů.

Myslím, že mnozí z vás, kteří se museli potýkat s rozložením, se setkali s potřebou zarovnat prvky vertikálně a znají potíže, které vznikají při zarovnání prvku na střed.

Ano, pro vertikální zarovnání existuje v CSS speciální vlastnost vertical-align s více hodnotami. V praxi to však vůbec nefunguje podle očekávání. Zkusme na to přijít.

Porovnejme následující přístupy. Zarovnat pomocí:

• stoly,
• odsazení,
• výška čáry
• protahování,
• záporná marže,
• transformovat
• pseudo prvek
• flexbox.

Pro ilustraci zvažte následující příklad.

Existují dva prvky div, přičemž jeden z nich je vnořen do druhého. Dejme jim odpovídající třídy – vnější a vnitřní.

Úkolem je zarovnat vnitřní prvek se středem vnějšího prvku.

Nejprve uvažujme případ, kdy jsou známy rozměry vnějších a vnitřních bloků. Přidejme zobrazení pravidla: inline-block k vnitřnímu prvku a text-align: center a vertical-align: middle k vnějšímu prvku.

Pamatujte, že zarovnání se vztahuje pouze na prvky, které mají režim zobrazení inline nebo inline-block.

Nastavíme velikosti bloků a také barvy pozadí, abychom viděli jejich okraje.

Vnější ( šířka: 200px; výška: 200px; text-align: center; vertical-align: middle; background-color: #ffc; ) .inner ( display: inline-block; width: 100px; height: 100px; background-color : #fcc)
Po použití stylů uvidíme, že vnitřní blok je zarovnán vodorovně, ale ne svisle:
http://jsfiddle.net/c1bgfffq/

Proč se to stalo? Jde o to, že vlastnost vertical-align ovlivňuje zarovnání samotného prvku, nikoli jeho obsah (kromě případů, kdy je aplikována na buňky tabulky). Použití této vlastnosti na vnější prvek tedy nic nevytvořilo. Navíc aplikace této vlastnosti na vnitřní prvek také nic neudělá, protože vložené bloky jsou zarovnány vertikálně vzhledem k sousedním blokům a v našem případě máme jeden vložený blok.

Existuje několik technik, jak tento problém vyřešit. Níže se na každý z nich podíváme blíže.

Zarovnání pomocí tabulky První řešení, které vás napadne, je nahradit vnější blok tabulkou o jedné buňce. V tomto případě bude zarovnání aplikováno na obsah buňky, tedy na vnitřní blok.

http://jsfiddle.net/c1bgfffq/1/

Zjevnou nevýhodou tohoto řešení je, že ze sémantického hlediska je nesprávné používat k zarovnání tabulky. Druhou nevýhodou je, že vytvoření tabulky vyžaduje přidání dalšího prvku kolem vnějšího bloku.

První mínus lze částečně odstranit nahrazením tagů table a td div a nastavením režimu zobrazení tabulky v CSS.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Vnější blok však stále zůstane stolem se všemi z toho plynoucími důsledky.

Zarovnání pomocí odsazení Pokud jsou známé výšky vnitřních a vnějších bloků, lze zarovnání nastavit pomocí svislých odsazení vnitřního bloku podle vzorce: (H vnější – H vnitřní) / 2.

Vnější ( výška: 200px; ) .vnitřní (výška: 100px; okraj: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Nevýhodou řešení je, že je použitelné pouze v omezeném počtu případů, kdy jsou známé výšky obou bloků.

Zarovnání podle výšky řádku Pokud víte, že vnitřní blok by neměl zabírat více než jeden řádek textu, můžete použít vlastnost line-height a nastavit ji na výšku vnějšího bloku. Vzhledem k tomu, že obsah vnitřního bloku by se neměl zalamovat do druhého řádku, doporučuje se přidat také pravidla white-space: nowrap a overflow: hidden.

Vnější ( výška: 200px; výška řádku: 200px; ) .vnitřní ( white-space: nowrap; overflow: hidden; )
http://jsfiddle.net/c1bgfffq/12/

Tuto techniku ​​lze také použít k zarovnání víceřádkového textu, pokud předefinujete hodnotu výšky řádku pro vnitřní blok a také přidáte pravidla zobrazení: inline-block a vertical-align: middle.

Outer ( height: 200px; line-height: 200px; ) .inner ( line-height: normal; display: inline-block; vertical-align: middle; )
http://jsfiddle.net/c1bgfffq/15/

Nevýhodou této metody je, že musí být známa výška vnějšího bloku.

Zarovnání pomocí „protažení“ Tuto metodu lze použít, když výška vnějšího bloku není známa, ale výška vnitřního bloku je známa.

K tomu potřebujete:

nastavit relativní umístění k externímu bloku a absolutní umístění k vnitřnímu bloku;

přidejte pravidla top: 0 a bottom: 0 k vnitřnímu bloku, v důsledku čehož se roztáhne na celou výšku vnějšího bloku;

nastavte vertikální výplň vnitřního bloku na auto.

.vnější ( pozice: relativní; ) .vnitřní ( výška: 100px; pozice: absolutní; nahoře: 0; dole: 0; okraj: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Myšlenkou této techniky je, že nastavení výšky pro roztažený a absolutně umístěný blok způsobí, že prohlížeč vypočítá vertikální výplň ve stejném poměru, pokud je nastavena na auto.

Zarovnání pomocí záporné horní hranice Tato metoda se stala široce známou a používá se velmi často. Stejně jako předchozí se používá, když je neznámá výška vnějšího bloku, ale je známá výška vnitřního.

Musíte nastavit externí blok na relativní polohování a interní blok na absolutní polohování. Potom musíte posunout vnitřní blok dolů o polovinu výšky vnějšího horního okraje bloku: 50 % a zvednout ho o polovinu jeho vlastní výšky okraj-horní: -H vnitřní / 2.

Vnější ( pozice: relativní; ) .vnitřní ( výška: 100px; pozice: absolutní; nahoře: 50 %; margin-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/

Nevýhodou této metody je, že musí být známa výška vnitřní jednotky.

Zarovnání pomocí transformace Tato metoda je podobná předchozí, ale lze ji použít, když není známa výška vnitřního bloku. V tomto případě můžete místo nastavení záporného odsazení pixelů použít vlastnost transform a posunout vnitřní blok nahoru pomocí funkce translateY a hodnoty -50 % .

Vnější ( pozice: relativní; ) .vnitřní ( pozice: absolutní; nahoře: 50 %; transformace: přeložitY(-50 %); )
http://jsfiddle.net/c1bgfffq/9/

Proč nebylo možné nastavit hodnotu v procentech v předchozí metodě? Protože se hodnoty procentuálního okraje počítají vzhledem k rodičovskému prvku, hodnota 50 % by byla polovina výšky vnějšího rámečku a vnitřní rámeček bychom museli zvednout na polovinu jeho vlastní výšky. Vlastnost transform je pro to ideální.

Nevýhodou této metody je, že ji nelze použít, pokud má vnitřní jednotka absolutní polohování.

Zarovnání pomocí Flexbox Nejmodernějším způsobem vertikálního vyrovnání je použití flexibilního rozvržení boxu (populárně známého jako Flexbox). Tento modul umožňuje flexibilně ovládat umístění prvků na stránce a uspořádat je téměř kdekoli. Zarovnání na střed pro Flexbox je velmi jednoduchý úkol.

Vnější blok musí být nastaven na zobrazení: flex a vnitřní blok na margin: auto . A to je vše! Krásné, že?

Vnější ( displej: flex; šířka: 200px; výška: 200px; ) .vnitřní ( šířka: 100px; okraj: auto; )
http://jsfiddle.net/c1bgfffq/14/

Nevýhodou této metody je, že Flexbox podporují pouze moderní prohlížeče.

Jakou metodu mám zvolit? Musíte začít od prohlášení o problému:

• Pro svislé zarovnání textu je lepší použít svislé odsazení nebo vlastnost line-height.
• Pro absolutně umístěné prvky se známou výškou (například ikony) je ideální metoda s negativní vlastností margin-top.
• Pro složitější případy, kdy výška bloku není známa, musíte použít pseudo prvek nebo vlastnost transform.
• No, pokud máte takové štěstí, že nepotřebujete podporovat starší verze prohlížeče IE, pak je samozřejmě lepší použít Flexbox.

Štítky: Přidat štítky

Velmi často je úkolem zarovnat blok na střed stránky/obrazovky, a to i tak, aby bez Java skriptu, bez nastavování pevných rozměrů nebo záporných odsazení a aby posuvníky fungovaly pro rodiče, pokud blok překročí svou velikost . Monotónních příkladů, jak zarovnat blok na střed obrazovky, je na internetu poměrně dost. Většina z nich je zpravidla založena na stejných principech.

Níže jsou uvedeny hlavní způsoby řešení problému, jejich klady a zápory. Pro pochopení podstaty příkladů doporučuji zmenšit výšku/šířku okna Výsledek v příkladech na uvedených odkazech.

Možnost 1: Záporné odsazení. Umístíme blok s horním a levým atributem na 50 % a s vědomím výšky a šířky bloku předem nastavíme záporný okraj, který se rovná polovině velikosti bloku. Obrovskou nevýhodou této možnosti je, že musíte počítat záporné odrážky. Blok se také nechová zcela správně, když je obklopen posuvníky – je jednoduše oříznut, protože má záporné okraje.

Nadřazený ( šířka: 100 %; výška: 100 %; pozice: absolutní; nahoře: 0; vlevo: 0; přetečení: auto; ) .block ( šířka: 250px; výška: 250px; pozice: absolutní; nahoře: 50 %; vlevo : 50 % okraj: -125px 0 0 -125px img (max. šířka: 100 %; výška: auto; zobrazení: blok; okraj: 0 auto; okraj: žádný; ) )

Možnost 2. Automatické odsazení. Méně časté, ale podobné prvnímu. U bloku nastavte šířku a výšku, umístěte atributy nahoře vpravo dole vlevo na 0 a nastavte automatický okraj. Výhodou této možnosti je funkční posuvníky na nadřazeném, pokud má tento nastaven 100% šířku a výšku. Nevýhodou této metody je tuhé nastavení rozměrů.

Nadřazený ( šířka: 100 %; výška: 100 %; pozice: absolutní; nahoře: 0; vlevo: 0; přetečení: auto; ) .block ( šířka: 250px; výška: 250px; pozice: absolutní; nahoře: 0; vpravo: 0 dole: 0 vlevo: 0;

Možnost 3. Tabulka. Nadřazené buňce nastavíme styly tabulky a u nadřazené buňky nastavíme zarovnání textu na střed. A dáme bloku liniový blokový model. Nevýhody, které dostáváme, jsou nefunkční posuvníky a obecně estetika „emulace“ tabulky není dobrá.

Nadřazená položka ( šířka: 100 %; výška: 100 %; zobrazení: tabulka; pozice: absolutní; nahoře: 0; vlevo: 0; > .inner ( display: tabulka-buňka; zarovnání textu: na střed; svislé zarovnání: na střed; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )

Chcete-li k tomuto příkladu přidat svitek, budete muset do návrhu přidat ještě jeden prvek.
Příklad: jsfiddle.net/serdidg/fk5nqh52/3.

Možnost 4. Pseudoprvek. Tato možnost postrádá všechny problémy uvedené v předchozích metodách a také řeší původní problémy. Cílem je stylizovat předchozí pseudoprvek na nadřazený prvek, konkrétně 100% výšku, zarovnání na střed a model vložených bloků. Stejným způsobem je samotný blok nastaven na model čárového bloku, zarovnaný na střed. Aby blok „nepadl“ pod pseudoprvek, když je velikost prvního větší než jeho rodič, označíme nadřazenému white-space: nowrap a font-size: 0, načež tyto styly zrušíme pro blok s následujícím - white-space: normal. V tomto příkladu je potřeba font-size: 0 k odstranění výsledné mezery mezi rodičem a blokem kvůli formátování kódu. Prostor lze odstranit jinými způsoby, ale považuje se za nejlepší se mu jednoduše vyhnout.

Nadřazená položka ( šířka: 100 %; výška: 100 %; pozice: absolutní; nahoře: 0; vlevo: 0; přetečení: auto; mezera: nowrap; zarovnání textu: na střed; velikost písma: 0; &:před ( výška: 100%: inline-blok: střední obsah: "" ;

Nebo pokud potřebujete, aby rodič zabral pouze výšku a šířku okna a ne celou stránku:

Rodič ( pozice: pevná; nahoře: 0; vpravo: 0; dole: 0; vlevo: 0; přetečení: auto; mezera: nowrap; zarovnání textu: na střed; velikost písma: 0; &:před ( výška: 100 % zobrazení: inline-blok: střední obsah: "";

Možnost 5. Flexbox. Jedním z nejjednodušších a nejelegantnějších způsobů je použití flexboxu. Nevyžaduje zbytečné pohyby těla, zcela jasně popisuje podstatu toho, co se děje, a je vysoce flexibilní. Jediné, co stojí za to pamatovat při výběru této metody, je podpora IE od verze 10 včetně. caniuse.com/#feat=flexbox

Rodič ( šířka: 100 %; výška: 100 %; poloha: pevná; nahoře: 0; vlevo: 0; zobrazení: flex; zarovnat-položky: na střed; zarovnat-obsah: na střed; zarovnat-obsah: na střed; přetečení: auto; ) .block ( background: #60a839; img ( display: block; border: none; ) )

Možnost 6. Transformace. Vhodné v případě, že jsme omezeni strukturou a s rodičovským prvkem nelze nijak manipulovat, ale blok je potřeba nějak zarovnat. Na pomoc přijde css funkce translate(). Hodnota 50% absolutního umístění umístí levý horní roh bloku přesně do středu, poté záporná hodnota posunutí posune blok vzhledem k jeho vlastním rozměrům. Upozorňujeme, že se mohou objevit negativní efekty v podobě rozmazaných okrajů nebo stylu písma. Tato metoda může také vést k problémům s výpočtem pozice bloku pomocí java-scriptu Někdy může pro kompenzaci ztráty 50 % šířky v důsledku použití vlastnosti CSS left pravidlo určené pro blok. nápověda: margin-right: -50 % .

Rodič ( šířka: 100 %; výška: 100 %; pozice: pevná; nahoře: 0; vlevo: 0; přetečení: auto; ) .block ( pozice: absolutní; nahoře: 50 %; vlevo: 50 %; transform: translate( -50 %, -50 %) img ( zobrazení: blok; ) )

Možnost 7. Tlačítko. Uživatelská možnost azproduction, kde je blok orámován v tagu tlačítka. Tlačítko má tu vlastnost, že centruje vše, co je uvnitř, tedy prvky inline a block-line (inline-block) modelu. V praxi nedoporučuji používat.

Rodič ( šířka: 100 %; výška: 100 %; pozice: absolutní; nahoře: 0; vlevo: 0; přetečení: auto; pozadí: žádné; ohraničení: žádné; obrys: žádné; ) .block ( zobrazení: inline-block; img (zobrazení: blok;; ohraničení: žádné; ) )

Bonus Pomocí myšlenky 4. možnosti můžete pro blok nastavit vnější okraje a zároveň se bloky adekvátně zobrazí obklopené posuvníky.
Příklad: jsfiddle.net/serdidg/nfqg9rza/2.

Obrázek můžete také zarovnat na střed, a pokud je obrázek větší než rodič, upravte jeho velikost na velikost rodiče.
Příklad: jsfiddle.net/serdidg/nfqg9rza/3.
Příklad s velkým obrázkem:

Dnes se, milý čtenáři, budeme zabývat problémem vertikálního vyrovnání v bloku div.

S největší pravděpodobností již víte o existenci nádherné vlastnosti CSS vertical-align.

A sám Bůh nám nařídil, abychom použili právě tuto vlastnost pro vertikální zarovnání (ne nadarmo má tak samovysvětlující název).

Problém: Je nutné zarovnat obsah bloku s proměnnou výškou na střed vzhledem k vertikále.

Nyní začneme problém řešit.

A tak máme blok, jeho výška se může změnit:

Blokovat obsah

A tak máme blok, jeho výška se může změnit:

První, co vás napadne, je udělat následující fintu: A tak máme blok, jeho výška se může změnit: budou zarovnány na středovou výšku kontejneru div.

Ale nebylo tomu tak! Tímto způsobem nedosáhneme žádného očekávaného středového zarovnání. Proč? Zdá se, že je vše uvedeno správně. Ukazuje se, že toto je ten rub: vlastnost svisle zarovnat lze použít pouze k zarovnání obsahu buněk tabulky nebo k vzájemnému zarovnání vložených prvků.

Pokud jde o zarovnání uvnitř buňky tabulky, myslím, že je vše jasné. Ale vysvětlím jiný případ s vloženými prvky.

Vertikální zarovnání inline prvků

Předpokládejme, že máte řádek textu, který je rozdělen značkami řádků na díly:

Vítá vás kousek textu!

Inline tag je kontejner, jehož vzhled nezpůsobuje zalomení obsahu do nového řádku.

Akce značky bloku způsobí, že se obsah kontejneru zalomí na nový řádek.

je bloková značka. Uzavřeme-li kusy textu do bloků , pak každý z nich bude na novém řádku. Pomocí značky , který na rozdíl , je malá, kontejnery nebudou přesunuty na nový řádek, všechny kontejnery zůstane na stejné lince.

Kontejner vhodné pro použití při specifikaci části textu se speciálním formátováním (zvýraznění barvou, jiným fontem atd.)

Pro kontejnery Použijte následující vlastnosti CSS:

#perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy( vertical-align:-3px; )

Výsledný řádek textu bude vypadat takto:

Nejde o nic jiného než o vertikální zarovnání vložených prvků a vlastnost CSS vertical-align se s tímto úkolem dokonale vyrovná.

Trochu jsme se rozptýlili, nyní se vracíme k našemu hlavnímu úkolu.

Vertikální zarovnání v kontejneru div

Bez ohledu na to použijeme vlastnost vertical-align pro zarovnání v kontejneru div. Jak jsem již řekl, tuto vlastnost lze využít v případě zarovnání inline prvků (tento případ jsme podrobně probrali výše a pro zarovnání v kontejneru div se nám nehodí); nezbývá než využít fakt, že svisle zarovnat funguje pro buňky tabulky.

Jak to můžeme použít? Nemáme stůl, pracujeme s kontejnerem div.

Ha, ukázalo se, že je to velmi jednoduché.

Vlastnost CSS display nám umožňuje přeměnit náš blok div na buňku tabulky, což lze provést snadno a přirozeně:

Řekněme, že máme třídu div zarovnání textu:

A tak máme blok, jeho výška se může změnit:

Pro tento blok specifikujeme následující vlastnost CSS:

Textalign( display: table-cell; )

Tato instrukce CSS zázračně promění náš div v buňku tabulky, aniž by ji jakkoli vizuálně změnila. A pro buňku tabulky můžeme použít vlastnost svisle zarovnat plně a požadované vertikální zarovnání bude fungovat.

Všechno však nemůže skončit tak jednoduše. Máme skvělý prohlížeč IE. Neví, jak s majetkem pracovat displej: tabulka-buňka(Doporučuji, abyste si přečetli tabulku znázorňující funkčnost této vlastnosti CSS v různých prohlížečích na webu htmlbook.ru). Proto se budeme muset uchýlit k různým trikům.

Existuje mnoho způsobů, jak dosáhnout zarovnání v kontejneru div pro všechny prohlížeče:

• Metoda využívající další pomocný kontejner div
• Metoda využívající výraz. Je to spojeno se složitým výpočtem výšek bloků. Bez znalosti JavaScriptu to nemůžete udělat.
• Pomocí vlastnosti line-height. Tato metoda je vhodná pouze pro vertikální vyrovnání v bloku známé výšky, a proto není použitelná v obecném případě.
• Použití absolutního a relativního posunu obsahu v případě prohlížeče IE. Tato metoda se mi zdá nejsrozumitelnější a nejjednodušší. Navíc je implementovatelný pro kontejner div s proměnnou výškou. Budeme se mu věnovat podrobněji.

Jak jste pochopili, musíme jen vyřešit problém vertikálního zarovnání v IE spojený s jeho nepochopením vlastnosti displej: tabulka-buňka(ani IE6, ani IE7, ani IE8 tuto vlastnost nezná). Proto pomocí podmíněného komentáře speciálně pro prohlížeče z rodiny IE označíme další vlastnosti CSS.

Podmíněný komentář

Typ konstrukce:

... Pokyny, které platí pouze v případě, že podmínka v hranatých závorkách platí...

se nazývá podmíněný komentář (pozor, typ podmíněného komentáře musí až na mezeru zcela odpovídat uvedenému příkladu).

Pokyny obsažené v takovém podmíněném komentáři budou provedeny pouze v případě, že prohlížeč interpretující tento kód patří do rodiny IE.

Pomocí podmíněného komentáře tedy můžeme skrýt kus kódu ze všech prohlížečů kromě IE.

Řešení problému

Kvůli této petrželi budeme muset poskytnout našemu HTML kódu dva další kontejnery. Náš textový blok bude vypadat takto:

Toto je nějaký ověřovací text.
Skládá se ze dvou linek.

Pro třídu kontejnerů div zarovnání textu Jsou nastaveny vlastnosti CSS, které zarovnávají jeho obsah vertikálně pro všechny běžné prohlížeče (samozřejmě kromě IE):

Displej: tabulka-buňka; svisle zarovnat: uprostřed;

A další dvě vlastnosti, které nastavují šířku a výšku bloku:

Šířka:500px; výška: 500px;

To stačí k vertikálnímu zarovnání obsahu kontejneru ve všech prohlížečích kromě IE.

Nyní začneme přidávat vlastnosti související se zarovnáním pro prohlížeče z rodiny IE (právě pro ně jsme použili další bloky div A rozpětí):

S odkazem na značku div uvnitř bloku třídy zarovnání textu. Chcete-li to provést, musíte nejprve uvést název třídy a poté, oddělený mezerou, značku, ke které přistupujeme.

Zarovnání textu div( pozice: absolutní; nahoře: 50 %; )

Tento návrh znamená: pro všechny tagy div uvnitř bloku s třídou zarovnání textu použít uvedené vlastnosti.

Podle toho styly určené pro blok zarovnání textu jsou upraveny:

Textalign( display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relativní; )

Nyní je levý horní bod textového bloku posunut dolů o 50 %.

Abych vysvětlil, co se děje, nakreslil jsem ilustraci:

Jak můžete vidět z obrázku, udělali jsme určitý pokrok. Ale to není všechno! Levý horní bod žlutého bloku se skutečně posunul o 50 % dolů vzhledem k rodičovskému (fialovému) bloku. Ale potřebujeme, aby padesát procent výšky fialového bloku bylo středem žlutého bloku a ne jeho levým horním bodem.

Nyní přijde na řadu tag rozpětí a jeho relativní umístění:

Rozpětí zarovnání textu ( pozice: relativní; nahoře: -50 %; )

Žlutý blok jsme tedy posunuli o 50 % jeho výšky vzhledem k jeho výchozí poloze. Jak víte, výška žlutého bloku se rovná výšce vystředěného obsahu. A poslední operace na span kontejneru umístila náš obsah doprostřed fialového bloku. Hurá!

Pojďme trochu podvádět

Nejprve musíme skrýt petržel ze všech normálních prohlížečů a otevřít ji pro IE. To lze samozřejmě provést pomocí podmíněného komentáře, ne nadarmo jsme se s ním seznámili:

.textalign div( pozice: absolutní; nahoře: 50 %; ) .textalign span( pozice: relativní; nahoře: -50 %; )

Je tu malý problém.

Pokud je vycentrovaný obsah příliš vysoký, vede to k nepříjemným důsledkům: existuje další výška pro svislé posouvání. Řešení problému: musíte přidat vlastnost přepad: skrytý blok

zarovnání textu. Seznamte se s nemovitostí podrobně přetékat

možné v . zarovnání textu Poslední CSS instrukce pro blok

má tvar:

Omlouvám se, zapomněl jsem zmínit jednu důležitou věc. Pokud se pokusíte nastavit výšku bloku třídy zarovnání textu v procentech, tak ti nic nevyjde.

Centrování v bloku s proměnnou výškou

Velmi často je potřeba nastavit výšku bloku třídy zarovnání textu ne v pixelech, ale jako procento výšky nadřazeného bloku a zarovnejte obsah kontejneru div doprostřed.

Háček je v tom, že to není možné udělat pro buňku tabulky (ale blok třídy zarovnání textu se díky vlastnosti promění přesně v buňku tabulky displej: tabulka-buňka).

V tomto případě musíte použít externí blok, pro který je specifikována vlastnost CSS displej: tabulka a již pro něj nastavte procentuální hodnotu výšky. Poté se do něj vnořil blok s direktivou CSS displej: tabulka-buňka, šťastně zdědí výšku nadřazeného bloku.

Abychom v našem příkladu implementovali blok s proměnnou výškou, trochu upravíme CSS:

Do třídy zarovnání textu změníme hodnotu nemovitosti zobrazit S tabulka-buňka na tabulka a odstraňte direktivu zarovnání svisle zarovnat: na střed. Nyní můžeme bez obav změnit hodnotu výšky z 500 pixelů například na 100 %.

Tedy vlastnosti CSS pro blok třídy zarovnání textu bude vypadat takto:

Zarovnání textu ( zobrazení: tabulka; šířka: 500 pixelů; výška: 100 %; pozice: relativní; přetečení: skryté; ohraničení: 1 pixel plná černá; )

Zbývá pouze implementovat centrování obsahu. K tomu je kontejner div vnořený do bloku třídy zarovnání textu(jedná se o stejný žlutý blok na obrázku), je třeba nastavit vlastnost CSS displej: tabulka-buňka, pak zdědí výšku 100 % z nadřazeného bloku zarovnání textu(fialový blok). A nic nám nezabrání zarovnat obsah vnořeného kontejneru div ve středu s vlastností svisle zarovnat: na střed.

Získáme další další seznam vlastností CSS pro blok div vnořený v kontejneru zarovnání textu.

Textalign div( display: table-cell; vertical-align: middle; )

To je celý trik. V případě potřeby můžete mít proměnnou výšku s obsahem vycentrovaným.

Další informace o svislém vyrovnání bloku s proměnnou výškou viz .