Poloha středového zarovnání pevná. Centrování bloku pomocí CSS. Horizontální a vertikální centrování pomocí jQuery

Při rozvržení stránky je často nutné zarovnat CSS centrum-way: například vycentrovat hlavní blok. Existuje několik možností řešení tohoto problému, z nichž každou musí dříve nebo později použít jakýkoli návrhář rozložení.

Zarovnání textu na střed

Často je pro dekorativní účely nutné nastavit zarovnání textu na střed, CSS v tomto případě umožňuje zkrátit dobu rozvržení. Dříve se to dělalo pomocí atributů HTML, ale nyní standard vyžaduje zarovnání textu pomocí šablon stylů. Na rozdíl od bloků, u kterých je potřeba se vyměnit okraje, V CSS zarovnání Centrování textu se provádí pomocí jednoho řádku:

• text-align:center;

Tato vlastnost se dědí a předává z rodiče všem potomkům. Ovlivňuje nejen text, ale i další prvky. K tomu musí být vložené (například span) nebo inline-block (jakékoli bloky, které jsou uvedeny zobrazit vlastnost:blok). Poslední možnost Umožňuje také změnit šířku a výšku prvku a flexibilněji upravit odsazení.

Na stránkách je zarovnání často přiřazeno samotné značce. To okamžitě znehodnotí kód, jak uznalo W3C zarovnat atribut zastaralý. Použití na stránce se nedoporučuje.

Zarovnání bloku na střed

Pokud potřebujete vycentrovat div, CSS může nabídnout docela dost pohodlný způsob: použití vnějších okraj odsazení. Odsazení lze nastavit jak pro prvky bloku, tak pro prvky inline-blok. Hodnota vlastnosti by měla být 0 (vertikální odsazení) a auto (automatické horizontální odsazení):

• okraj:0 auto;

Nyní je tato možnost uznána jako absolutně platná. Použití externího odsazení také umožňuje nastavit vycentrování obrázku: umožňuje vyřešit mnoho problémů souvisejících s umístěním prvku na stránce.

Zarovnejte blok doleva nebo doprava

Někdy není zarovnání CSS na střed vyžadováno, ale musíte umístit dva bloky vedle sebe: jeden na levý okraj a druhý na pravý. Pro toto existuje float vlastnost, která může nabývat jedné ze tří hodnot: vlevo, vpravo nebo žádná. Řekněme, že máte dva bloky, které je třeba umístit vedle sebe. Pak bude kód vypadat takto:

• .left (float:left;)
• .right(float:right)

Pokud existuje také třetí blok, který by měl být umístěn pod prvními dvěma bloky (například zápatí), je třeba mu dát vlastnost clear:

• .left (float:left;)
• .right(float:right)
• zápatí (jasné:obě)

Faktem je, že bloky s třídami vlevo a vpravo vypadnou z obecného toku, to znamená, že všechny ostatní prvky ignorují samotnou existenci zarovnaných prvků. Vlastnost clear:both umožňuje zápatí nebo jinému bloku vidět prvky, které vypadly z toku, a zakazuje plovoucí nalevo i napravo. Proto se v našem příkladu posune zápatí dolů.

Vertikální zarovnání

Jsou chvíle, kdy nestačí nastavit zarovnání na střed pomocí metod CSS, musíte také změnit vertikální polohu podřízeného bloku. Jakýkoli inline nebo inline-block prvek lze vysunout nahoru resp spodní okraj, být uprostřed nadřazeného prvku nebo být na náhodném místě. Nejčastěji k tomu potřebujete zarovnat blok na střed; atribut vertikálního zarovnání. Řekněme, že existují dva bloky, jeden vnořený do druhého. V čem vnitřní jednotka— prvek inline-block (zobrazení: inline-block). Musíte zarovnat podřízený blok svisle:

• zarovnání nahoru - .child(vertical-align:top);
• zarovnání na střed - .child(vertical-align:middle);
• zarovnání dolů - .child(vertical-align:bottom);

Zarovnání textu ani svislé zarovnání neovlivňuje prvky bloku.

Možné problémy se zarovnanými bloky

Někdy může centrování div pomocí CSS způsobit malé potíže. Například kdy pomocí plováku: Řekněme, že existují tři bloky: .první, .druhý a .třetí. Druhý a třetí blok leží v prvním. Prvek s třídou second je zarovnán doleva a poslední blok- napravo. Po vyrovnání oba vypadly z proudu. Pokud nadřazený prvek nemá nastavenou výšku (například 30em), pak se již neroztáhne do výšky svých podřízených bloků. Abyste se této chybě vyhnuli, použijte „spacer“ – speciální blok, který vidí .second a .third. CSS kód:

• .second(float:left)
• .třetí(plovoucí:vpravo)
• .clearfix(výška:0; jasná: obojí;)

Často se používá pseudo-třída:after, která také umožňuje vrátit bloky na jejich místo vytvořením pseudo-spaceru (v příkladu je div s třídou kontejneru inside.first a obsahuje.left a.right) :

• .left(float:left)
• .right(float:right)
• .container:after(content:""; display:table; clear:both;)

Výše uvedené možnosti jsou nejběžnější, i když existuje několik variant. Pomocí experimentování můžete vždy najít nejjednodušší a nejpohodlnější způsob, jak vytvořit pseudo-spacer.

Dalším problémem, se kterým se návrháři rozvržení často setkávají, je zarovnání malá písmena- blokové prvky. Za každou z nich se automaticky přidá mezera. Pomáhá se s tím vyrovnat vlastnost marže, kterému je dána záporná marže. Existují další metody, které se používají mnohem méně často: například nulování V tomto případě je ve vlastnostech nadřazeného prvku zapsáno font-size: 0. Pokud je uvnitř bloků text, pak ve vlastnostech prvků inline-block je již vrácen správná velikost písmo. Například font-size:1em. Tato metoda není vždy vhodná, proto se mnohem častěji používá možnost s externími odrážkami.

Zarovnání bloků umožňuje vytvářet krásné a funkční stránky: to zahrnuje rozvržení celkového rozvržení, uspořádání produktů v internetových obchodech a fotografie na webových stránkách vizitek.

Kolik kopií již bylo rozbito o úkolu zarovnat prvky na stránce. Upozorňuji na překlad výborného článku s řešením tohoto problému od Stephena Shawa pro Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS.

Všichni jsme věděli o okraj: 0 auto; pro horizontální centrování, ale okraj: auto; nefungovalo pro vertikální. To lze snadno opravit jednoduchým nastavením výšky a použitím následujících stylů:

Absolutní střed ( okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; )
Nejsem první, kdo toto řešení navrhuje, ale tento přístup se používá jen zřídka vertikální zarovnání. V komentářích k článku How to Center Anything With CSS Simon odkazuje na příklad jsFiddle, který poskytuje dokonalé řešení Pro vertikální centrování. Zde je několik dalších na toto téma.

Pojďme se na metodu podívat blíže.

Výhody

• Kompatibilita mezi různými prohlížeči (včetně IE 8-10)
• Žádné další značení, minimální styling
• Přizpůsobivost
• Nezávislost od vycpávka(bez velikost krabice!)
• Funguje pro obrázky

Nedostatky

• Výška musí být specifikována (viz Variabilní výška)
• Doporučuje se nastavit přetečení: auto aby se obsah nešířil
• Nefunguje na Windows Phone

Kompatibilita s prohlížečem

Metoda byla testována a funguje skvěle v prohlížečích Chrome, Firefox, Safari, Mobilní Safari a dokonce i IE 8-10. Jeden uživatel zmínil, že obsah není na Windows Phone vertikálně zarovnán.

Uvnitř nádoby

Obsah umístěný v kontejneru s poloha: relativní dokonale se vyrovná:

Absolute-Center ( šířka: 50 %; výška: 50 %; přetečení: auto; okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; )

Pomocí výřezu

Nastavíme obsah na pozici: opraveno a nastavíme z-index:

Absolute-Center.is-Fixed ( šířka: 50 %; výška: 50 %; přetečení: auto; okraj: auto; poloha: pevná; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; z-index: 999;

Přizpůsobivost

Hlavní výhodou popsané metody je dobrá práce když je výška nebo šířka zadána v procentech, a dokonce i porozumění min-width/max-width A min-výška/max-výška.

Absolute-Center.is-Responsive ( šířka: 60 %; výška: 60 %; minimální šířka: 400 pixelů; max. šířka: 500 pixelů; odsazení: 40 pixelů; přetečení: auto; okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; vpravo: 0;

Ofsety

Pokud má web pevnou hlavičku nebo potřebujete udělat nějaké jiné odsazení, stačí do stylů přidat kód jako tento horní: 70px; Aktuálně nastaveno okraj: auto; blok obsahu bude správně vycentrován na výšku.

Můžete také zarovnat obsah podle pravá strana, ponechat centrování na výšku. Chcete-li to provést, musíte použít vpravo: 0; vlevo: auto; pro pravé zarovnání popř vlevo: 0; vpravo: auto; pro zarovnání doleva.

Absolute-Center.is-Right ( šířka: 50 %; výška: 50 %; okraj: auto; přetečení: auto; pozice: absolutní; nahoře: 0; vlevo: auto; dole: 0; vpravo: 20px; zarovnání textu: že jo;

Spousta obsahu

Abychom zajistili, že velké množství obsahu nedovolí, aby se rozvržení vzdalovalo, používáme přetečení: auto. objeví se vertikální rolování. Můžete také přidat max-výška: 100 %; pokud obsah nemá další výplň.
.Absolute-Center.is-Overflow ( šířka: 50 %; výška: 300 pixelů; max-výška: 100 %; okraj: auto; přetečení: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo : 0;

snímky

Tato metoda funguje skvěle i pro obrázky! Přidáme styl výška: auto; pak se obrázek změní spolu s kontejnerem.

Absolute-Center.is-Image ( šířka: 50 %; výška: auto; okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; )

Variabilní výška

Popsaná metoda vyžaduje danou výšku bloku, kterou lze zadat v procentech a ovládat pomocí Maximální výška, díky čemuž je metoda ideální pro responzivní weby. Jedním ze způsobů, jak nespecifikovat výšku, je použít displej: tabulka. V tomto případě je blok obsahu vystředěn bez ohledu na velikost.

Mohou nastat problémy s kompatibilitou mezi různými prohlížeči, možná byste měli použít metodu tabulky buněk (popsaná níže).

• Firefox/IE8: používání displej: tabulka Zarovná blok svisle k hornímu okraji dokumentu.
• IE9/10: používání displej: tabulka zarovná blok doleva horní roh stránky.
• Mobilní Safari: pokud je šířka zadána v procentech, trpí horizontální centrování

.Absolute-Center.is-Variable ( displej: tabulka; šířka: 50 %; přetečení: auto; okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; )

jiné metody

Popsaná metoda funguje ve většině případů skvěle, ale existují i ​​jiné metody, které mohou být použitelné pro řešení konkrétních problémů.

Záporná marže

Asi nejoblíbenější způsob. Vhodné, pokud jsou známy rozměry bloku.

Je-negativní ( šířka: 300px; výška: 200px; odsazení: 20px; pozice: absolutní; nahoře: 50%; vlevo: 50%; okraj-levý: -170px; /* (šířka + odsazení)/2 */ okraj- nahoře: -120px /* (výška + odsazení)/2 */ )
výhody:

• Kompatibilita mezi různými prohlížeči
• Minimální kód

nedostatky:

• Ne adaptivní
• Pokud je v nádobě příliš mnoho obsahu, rozvržení se zmenšuje
• Musíte kompenzovat odsazení nebo použití box-sizing: border-box

Pomocí transformace

Jeden z nejvíce jednoduchými způsoby, podporuje výškové změny. Na toto téma existuje podrobný článek - "Centering Percentage Width/Height Elements" od CSS-Tricks.

Is-Transformed ( šířka: 50 %; okraj: auto; pozice: absolutní; nahoře: 50 %; vlevo: 50 %; -webkit-transform: translate(-50%,-50%); -ms-transform: translate( -50%,-50%) transformovat: přeložit (-50%,-50%);
výhody:

• Variabilní výška
• Minimální kód

nedostatky:

• Nefunguje v IE 8
• Použití předpon
• Může rušit jiné účinky s přeměnit
• V některých případech jsou okraje bloku a text během vykreslování rozmazané

Tabulka-buňka

Možná jeden z nejlepších a nejjednodušších způsobů. Podrobně popsáno v článku "Flexibilní výškové vertikální centrování s CSS, mimo IE7" od 456bereasttreet. Hlavní nevýhoda- další označení: jsou vyžadovány tři prvky:

CSS:
.Pos-Container.is-Table ( zobrazení: tabulka; ) .is-Table .Table-Cell ( zobrazení: buňka-tabulka; svislé zarovnání: na střed; ) .is-Tabulka .Středový blok ( šířka: 50 %; okraj: 0 auto;
výhody:

• Variabilní výška
• Rozvržení nefunguje, když velké množství text v bloku
• Kompatibilita mezi různými prohlížeči

nedostatky:

• Složitá struktura

Flexbox

Budoucnost CSS, flexbox, vyřeší mnoho dnešních problémů s rozložením. Podrobně je to napsáno v článku časopisu Smashing Magazine s názvem Centering Elements with Flexbox.

Pos-Container.is-Flexbox ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; - moz-box-align: center; -webkit-align: center; -ms-flex-pack: center; : střed; zarovnat-obsah: střed)
výhody:

• Obsah může mít libovolnou výšku nebo šířku
• Lze použít ve složitějších případech

nedostatky:

• Žádná podpora pro IE 8-9
• Vyžaduje kontejner nebo styly v těle
• Vyžaduje širokou škálu předpon to správné fungování v moderních prohlížečích
• Možné problémy s výkonem

Sečteno a podtrženo

Každá metoda má výhody a nevýhody. V podstatě jde o výběr, které prohlížeče by měly být podporovány

Při vytváření bloků div jste pravděpodobně narazili na situace, kdy potřebujete vycentrovat div horizontálně a vertikálně pomocí čistého CSS. Například při vytváření vyskakovacích oken pomocí . Existuje několik způsobů, jak implementovat centrování, a v tomto článku se podělím o své oblíbené a nejjednodušší způsoby, pomocí CSS nebo jQuery.

Nejprve základy:

Horizontální centrování v CSS

To je snadné, používáme okraj pro naše div blok.

ClassName( margin:0 auto; width:200px; height:200px; )

Pro centrování div blok pouze vodorovně, je třeba určit šířku bloku (width), použijte vlastnost auto pro marže vlevo a vpravo. Tato metoda bude fungovat pro všechny prvky bloku (div, p, h1 atd.). Chcete-li použít horizontální centrování pro vložené prvky (odkazy, obrázky...), musíte použít parametr Zobrazit:blok;

Horizontální a vertikální centrování v CSS

Centrování blok div horizontálně i vertikálně zároveň, trochu složitější. Musíte předem znát rozměry bloku div.

ClassName( šířka:300px; výška:200px; pozice:absolutně; vlevo:50%; nahoře:50%; okraj:-100px 0 0 -150px; )

Používáním absolutní Umístěním bloku jej můžeme oddělit od okolních prvků a určit jeho polohu vzhledem k velikosti okna prohlížeče. Přesuňte blok div do 50% vlevo a nahoře v okně. Levý horní roh bloku je nyní ve středu okna prohlížeče. Zbývá pouze nainstalovat blok div do středu stránky jeho přesunutím polovinu své šířky vlevo a polovinu její výšky nahoru. Hurá! Výsledkem bylo výborné centrování bloku na čisté css kód.

Horizontální a vertikální centrování pomocí jQuery

Jak již bylo zmíněno dříve – CSS metoda centrování funguje pouze s pevnými rozměry. Pokud rozměry nejsou uvedeny, pomoc přijde metoda jQuery:

$(window).resize(function())( $(".className").css(( position:"absolute", left: ($(window).width() - $(".className").outerWidth ( ))/2, nahoře: ($(window).height() - $(".className").outerHeight())/2 )); // Spuštění funkce při načtení okna: $(window).resize();

Úkon tato metoda je spustit funkci resize() pomocí řádku $(window).resize(). Tato funkce funguje při každé změně velikosti okna prohlížeče. Používáme vnější šířka() A vnějšíVýška(), protože na rozdíl šířka() A výška(), zahrnují výplň a tloušťku ohraničení ve velikosti, kterou vrátí. Poslední řádek zahájí proces centrování bloku div při načítání stránky.

Výhodou použití této metody je, že možná nevíte, jakou má div velikost. Hlavní nevýhodou je, že funguje pouze tehdy, když je povolen JavaScript. Proto je tato metoda přijatelná pro multifunkční rozhraní, jako je VKontakte, Facebook atd.

Jako vždy můžete svou oblíbenou metodu centrování bloků navrhnout pomocí komentáře.

Kolik kopií již bylo rozbito o úkolu zarovnat prvky na stránce. Upozorňuji na překlad výborného článku s řešením tohoto problému od Stephena Shawa pro Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS.

Všichni jsme věděli o okraj: 0 auto; pro horizontální centrování, ale okraj: auto; nefungovalo pro vertikální. To lze snadno opravit jednoduchým nastavením výšky a použitím následujících stylů:

Absolutní střed ( okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; )
Nejsem první, kdo toto řešení navrhuje, ale tento přístup se pro vertikální zarovnání používá jen zřídka. V komentářích k článku How to Center Anything With CSS Simon odkazuje na příklad jsFiddle, který poskytuje skvělé řešení pro vertikální centrování. Zde je několik dalších na toto téma.

Pojďme se na metodu podívat blíže.

Výhody

• Kompatibilita mezi různými prohlížeči (včetně IE 8-10)
• Žádné další značení, minimální styling
• Přizpůsobivost
• Nezávislost od vycpávka(bez velikost krabice!)
• Funguje pro obrázky

Nedostatky

• Výška musí být specifikována (viz Variabilní výška)
• Doporučuje se nastavit přetečení: auto aby se obsah nešířil
• Nefunguje na Windows Phone

Kompatibilita s prohlížečem

Metoda byla testována a funguje skvěle v prohlížečích Chrome, Firefox, Safari, Mobile Safari a dokonce i IE 8-10. Jeden uživatel zmínil, že obsah není na Windows Phone vertikálně zarovnán.

Uvnitř nádoby

Obsah umístěný v kontejneru s poloha: relativní dokonale se vyrovná:

Absolute-Center ( šířka: 50 %; výška: 50 %; přetečení: auto; okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; )

Pomocí výřezu

Nastavíme obsah na pozici: opraveno a nastavíme z-index:

Absolute-Center.is-Fixed ( šířka: 50 %; výška: 50 %; přetečení: auto; okraj: auto; poloha: pevná; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; z-index: 999;

Přizpůsobivost

Hlavní výhodou popsané metody je, že funguje perfektně, když je výška nebo šířka zadána v procentech, a dokonce i pochopení min-width/max-width A min-výška/max-výška.

Absolute-Center.is-Responsive ( šířka: 60 %; výška: 60 %; minimální šířka: 400 pixelů; max. šířka: 500 pixelů; odsazení: 40 pixelů; přetečení: auto; okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; vpravo: 0;

Ofsety

Pokud má web pevnou hlavičku nebo potřebujete udělat nějaké jiné odsazení, stačí do stylů přidat kód jako tento horní: 70px; Aktuálně nastaveno okraj: auto; blok obsahu bude správně vycentrován na výšku.

Můžete také zarovnat obsah na požadovanou stranu a ponechat centrování na výšku. Chcete-li to provést, musíte použít vpravo: 0; vlevo: auto; pro pravé zarovnání popř vlevo: 0; vpravo: auto; pro zarovnání doleva.

Absolute-Center.is-Right ( šířka: 50 %; výška: 50 %; okraj: auto; přetečení: auto; pozice: absolutní; nahoře: 0; vlevo: auto; dole: 0; vpravo: 20px; zarovnání textu: že jo;

Spousta obsahu

Abychom zajistili, že velké množství obsahu nedovolí, aby se rozvržení vzdalovalo, používáme přetečení: auto. Zobrazí se svislý posuvník. Můžete také přidat max-výška: 100 %; pokud obsah nemá další výplň.
.Absolute-Center.is-Overflow ( šířka: 50 %; výška: 300 pixelů; max-výška: 100 %; okraj: auto; přetečení: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo : 0;

snímky

Tato metoda funguje skvěle i pro obrázky! Přidáme styl výška: auto; pak se obrázek změní spolu s kontejnerem.

Absolute-Center.is-Image ( šířka: 50 %; výška: auto; okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; )

Variabilní výška

Popsaná metoda vyžaduje danou výšku bloku, kterou lze zadat v procentech a ovládat pomocí Maximální výška, díky čemuž je metoda ideální pro responzivní weby. Jedním ze způsobů, jak nespecifikovat výšku, je použít displej: tabulka. V tomto případě je blok obsahu vystředěn bez ohledu na velikost.

Mohou nastat problémy s kompatibilitou mezi různými prohlížeči, možná byste měli použít metodu tabulky buněk (popsaná níže).

• Firefox/IE8: používání displej: tabulka Zarovná blok svisle k hornímu okraji dokumentu.
• IE9/10: používání displej: tabulka Zarovná blok do levého horního rohu stránky.
• Mobilní Safari: pokud je šířka nastavena na procenta, trpí horizontální centrování

.Absolute-Center.is-Variable ( displej: tabulka; šířka: 50 %; přetečení: auto; okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; )

jiné metody

Popsaná metoda funguje ve většině případů skvěle, ale existují i ​​jiné metody, které mohou být použitelné pro řešení konkrétních problémů.

Záporná marže

Asi nejoblíbenější způsob. Vhodné, pokud jsou známy rozměry bloku.

Je-negativní ( šířka: 300px; výška: 200px; odsazení: 20px; pozice: absolutní; nahoře: 50%; vlevo: 50%; okraj-levý: -170px; /* (šířka + odsazení)/2 */ okraj- nahoře: -120px /* (výška + odsazení)/2 */ )
výhody:

• Kompatibilita mezi různými prohlížeči
• Minimální kód

nedostatky:

• Ne adaptivní
• Pokud je v nádobě příliš mnoho obsahu, rozvržení se zmenšuje
• Musíte kompenzovat odsazení nebo použití box-sizing: border-box

Pomocí transformace

Jeden z nejjednodušších způsobů podporuje změny výšky. Na toto téma existuje podrobný článek - "Centering Percentage Width/Height Elements" od CSS-Tricks.

Is-Transformed ( šířka: 50 %; okraj: auto; pozice: absolutní; nahoře: 50 %; vlevo: 50 %; -webkit-transform: translate(-50%,-50%); -ms-transform: translate( -50%,-50%) transformovat: přeložit (-50%,-50%);
výhody:

• Variabilní výška
• Minimální kód

nedostatky:

• Nefunguje v IE 8
• Použití předpon
• Může rušit jiné účinky s přeměnit
• V některých případech jsou okraje bloku a text během vykreslování rozmazané

Tabulka-buňka

Možná jeden z nejlepších a nejjednodušších způsobů. Podrobně popsáno v článku "Flexibilní výškové vertikální centrování s CSS, mimo IE7" od 456bereasttreet. Hlavní nevýhodou je dodatečné značení: jsou vyžadovány tři prvky:

CSS:
.Pos-Container.is-Table ( zobrazení: tabulka; ) .is-Table .Table-Cell ( zobrazení: buňka-tabulka; svislé zarovnání: na střed; ) .is-Tabulka .Středový blok ( šířka: 50 %; okraj: 0 auto;
výhody:

• Variabilní výška
• Rozvržení nefunguje, pokud je v bloku velké množství textu
• Kompatibilita mezi různými prohlížeči

nedostatky:

• Složitá struktura

Flexbox

Budoucnost CSS, flexbox, vyřeší mnoho dnešních problémů s rozložením. Podrobně je to napsáno v článku časopisu Smashing Magazine s názvem Centering Elements with Flexbox.

Pos-Container.is-Flexbox ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; - moz-box-align: center; -webkit-align: center; -ms-flex-pack: center; : střed; zarovnat-obsah: střed)
výhody:

• Obsah může mít libovolnou výšku nebo šířku
• Lze použít ve složitějších případech

nedostatky:

• Žádná podpora pro IE 8-9
• Vyžaduje kontejner nebo styly v těle
• Ke správnému fungování v moderních prohlížečích vyžaduje širokou škálu předpon
• Možné problémy s výkonem

Sečteno a podtrženo

Každá metoda má výhody a nevýhody. V podstatě jde o výběr, které prohlížeče by měly být podporovány

Velmi často je úkolem zarovnat blok na střed stránky / obrazovky, a to i tak, že bez Java skriptu, bez úkolu tuhé velikosti nebo záporné odsazení, aby posuvníky fungovaly i 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í.

Polohování blok atributy nahoře a vlevo o 50 %, a když předem známe výšku a šířku bloku, nastavíme záporná marže, což je poloviční velikost blok. Obrovské mínus tato možnost je, že musíte počítat zápornou výplň. Taky blok nechová se zcela správně, když je obklopena posuvníky - je jednoduše oříznuta, 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. Pro blok nastavte šířku a výšku, umístěte atributy nahoře vpravo dole vlevo na 0 a nastavte marže auto. Výhodou této možnosti jsou funkční posuvníky rodič, pokud má 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.

Pojďme se zeptat rodič styly tabulky, buň rodič Nastavte zarovnání textu na střed. A blok nastavíme model liniového bloku. Nevýhody, které dostáváme, jsou nefunkční posuvníky a obecně estetika „emulace“ tabulky není.

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 je bez všech problémů uvedených v předchozí metody, a také řeší původně nastavené úkoly. Jde o to rodič nastavit styly pseudo prvek dříve, konkrétně 100% výška, zarovnání na střed a inline blokový model. Stejné je to s blok je nastaven model čárového bloku, vycentrován. Na blok"nespadl" pod pseudo prvek, když rozměry prvního jsou větší než rodič, uveďte rodič white-space: nowrap a font-size: 0, po kterém blok zrušte tyto styly následujícím způsobem - white-space: normal. V v tomto příkladu font-size: 0 je potřeba k odstranění výsledné mezery mezi rodič A blok 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 pomocí 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 tato metoda- 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é, pokud jsme omezeni konstrukcí a není jak manipulovat nadřazený prvek, ale blok je potřeba nějak zarovnat. přijde na pomoc css funkce přeložit() . V hodnotě 50 % absolutní umístění pak umístí levý horní roh bloku přesně na střed negativní význam translate posune blok vzhledem k jeho vlastním rozměrům. Vezměte prosím na vědomí, že mohou plavat negativní účinky v podobě neostrých okrajů nebo stylu písma. Také tato metoda může vést k problémům s výpočtem polohy bloku pomocí java-scriptu, někdy ke kompenzaci ztráty 50% šířky v důsledku použití vlastnosti css doleva může pomoci pravidlo určené pro blok: 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 kde blok orámované štítkem na knoflíku. 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 nastavit vnější okraje pro blok, a ten bude adekvátně zobrazen obklopený posuvníky.
Příklad: jsfiddle.net/serdidg/nfqg9rza/2.

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