Středový blok css. Horizontální a vertikální zarovnání prvků v CSS
Weboví designéři používají DIV každý den v práci. Bez nadsázky jde o nejoblíbenější tag. Otevřete zdroj libovolného webu a uvidíte, že většina, ne-li dvě třetiny objektů, jsou uzavřeny v
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ů.
Existuje několik zásadně odlišných způsobů, jak svisle vycentrovat objekt pomocí CSS, ale vybrat ten správný může být složité. Na některé z nich se podíváme a na základě získaných znalostí také vytvoříme malý web.
Vertikální zarovnání na střed pomocí CSS není tak snadné dosáhnout. Existuje mnoho způsobů a ne všechny fungují ve všech prohlížečích. Pojďme se podívat na 5 různých metod a na výhody a nevýhody každé z nich. Příklad.
1. způsob
Tato metoda předpokládá, že nastavujeme nějaký prvek
klady
- Obsah může dynamicky měnit výšku (výška není definována v CSS).
- Obsah není zkrácen, pokud pro něj není dostatek místa.
Mínusy
- Nefunguje v IE 7 a nižších
- Spousta vnořených značek
2. způsob
Tato metoda využívá absolutní umístění prvku div , který má horní okraj nastaven na 50 % a horní okraj (margin-top) mínus polovinu výšky obsahu. To znamená, že objekt musí mít pevnou výšku, která je definována ve stylech CSS.
Jelikož je výška pevná, můžete nastavit overflow:auto; pro div obsahující obsah, takže pokud se obsah nevejde, zobrazí se posuvníky.
klady
- Funguje ve všech prohlížečích.
- Žádné další investice.
Mínusy
- Když není dostatek místa, obsah zmizí (např. div je uvnitř těla a uživatel zmenší okna, v takovém případě se posuvníky nezobrazí.
3. způsob
Při této metodě obalíme obsahový div jiným div. Nastavte jeho výšku na 50 % (výška: 50 %;) a spodní okraj na polovinu výšky (margin-bottom:-contenttheight;). Obsah se uvolní a bude vycentrován.
klady
- Funguje ve všech prohlížečích.
- Při nedostatku místa (například při zmenšení okna) není obsah oříznut, objeví se posuvníky.
Mínusy
- Myslím, že jediné: že je použit další prázdný prvek.
4. metoda.
Tato metoda používá vlastnost position:absolute; pro divy s pevnými rozměry (šířka a výška). Poté nastavíme jeho souřadnice top:0; dole:0; , ale protože má pevnou výšku, nemůže se natáhnout a je vycentrovaný. To je velmi podobné známé metodě horizontálního centrování prvku na úrovni bloku s pevnou šířkou (margin: 0 auto;).
klady
- Velmi jednoduché.
Mínusy
- Nefunguje v Internet Exploreru
- Pokud v kontejneru není dostatek místa, obsah bude oříznut bez posuvníků.
5. metoda
Tuto metodu můžete použít k vystředění jednoho řádku textu. Stačí nastavit výšku textu (line-height) na výšku prvku (height). Poté se čára zobrazí uprostřed.
klady
- Funguje ve všech prohlížečích.
- Neořízne text, pokud se nevejde.
Mínusy
- Funguje pouze s textem (nepracuje s prvky bloku).
- Pokud je tam více než jeden řádek textu, vypadá to velmi špatně.
Tato metoda je velmi užitečná pro malé prvky, jako je centrování textu v tlačítku nebo textovém poli.
Nyní, když víte, jak dosáhnout vertikálního zarovnání na střed, pojďme vytvořit jednoduchý web, který bude nakonec vypadat takto:
Krok 1
Vždy je dobré začít se sémantickým značením. Naše stránka bude strukturována takto:
- #floater (pro vystředění obsahu)
- #centred (středový prvek)
- #boční
- #logo
- #nav (seznam
- #obsah
- #bottom (pro autorská práva a vše)
Napišme následující html označení:
Společnost zaměřená na střed SpolečnostNázev stránky
Holisticky přepracujte outsourcing s přidanou hodnotou po spolupráci zaměřené na procesy a sdílení nápadů. Energeticky zjednodušte efektní mezery na trhu prostřednictvím povolených imperativů. Holisticky převládejte prémiové inovace po přesvědčivých scénářích. Bezproblémově rekapitulujte vysoké standardy lidského kapitálu pomocí špičkových vyráběných produktů. Výrazně syndikujte schémata vyhovující standardům před robustními vortály. Jedinečně rekapitulujte využitou připravenost webu vis-a-vis předem připraveným informacím.
Nadpis 2
Efektivně přijměte přizpůsobenou webovou připravenost spíše než procesy řízené zákazníky. Asertivně zvyšujte požadavky napříč platformami ve vztahu k proaktivním technologiím. Pohodlně posilujte multidisciplinární metaslužby bez celopodnikových rozhraní. Pohodlně zefektivněte konkurenční strategické tematické oblasti pomocí zaměřených elektronických trhů. Fosfluorescenčně syndikujte komunity světové třídy vis-a-vis s trhy s přidanou hodnotou. Vhodně znovu objevte holistické služby před robustními elektronickými službami.
Upozornění na autorská práva je zde
Krok 2
Nyní napíšeme nejjednodušší CSS pro umístění prvků na stránku. Tento kód byste měli uložit do souboru style.css. Právě na něm je odkaz zapsán v html souboru.
Html, tělo ( okraj: 0; odsazení: 0; výška: 100 %; ) tělo ( pozadí: url("page_bg.jpg") 50 % 50 % bez opakování #FC3; rodina písem: Georgia, Times, patky; ) #floater ( pozice: relativní; plovoucí: vlevo; výška: 50 %; margin-bottom: -200px; width: 1px; ) #centered ( pozice: relativní; jasná: vlevo; výška: 400px; šířka: 80 %; max. -width: 800px; min-width: 400px; margin: 0 auto; background: #fff; border: 4px solid #666; ) #bottom ( position: absolute; bottom: 0; right: 0; ) #nav ( position: absolutní; vlevo: 0; nahoře: 0; dole: 0; vpravo: 70 %; odsazení: 20 pixelů; okraj: 10 pixelů; ) #content ( pozice: absolutní; vlevo: 30 %; vpravo: 0; nahoře: 0; dole: 0; přetečení: auto; výška: 340px; odsazení: 20px; okraj: 10px; )
Než budeme moci obsah zarovnat na střed, musíme nastavit výšku těla a html na 100 %. Vzhledem k tomu, že výška je uvažována bez vnitřní a vnější výplně (výplň a okraj), nastavíme je (výplň) na 0, aby nebyly žádné posuvníky.
Spodní výplň pro prvek „floater“ je mínus polovina výšky obsahu (400px), konkrétně -200px ;
Vaše stránka by nyní měla vypadat nějak takto:
Šířka prvku #centered je 80 %. Díky tomu je náš web užší na malých obrazovkách a širší na větších. většina stránek vypadá na nových širokých monitorech v levém horním rohu ošklivě. Vlastnosti min-width a max-width také omezují naši stránku, aby nevypadala příliš široká nebo příliš úzká. Internet Explorer tyto vlastnosti nepodporuje. Musí být nastavena na pevnou šířku.
Protože prvek #centered je nastaven na position:relative , můžeme použít absolutní umístění prvků v něm. Poté nastavte overflow:auto; pro prvek #content, aby se zobrazily posuvníky, pokud se tam nevejde žádný obsah.
Krok 3
A poslední věc, kterou uděláme, je přidat nějaký styl, aby stránka vypadala trochu atraktivněji. Začněme jídelníčkem.
#nav ul ( styl seznamu: žádný; odsazení: 0; okraj: 20px 0 0 0; odsazení textu: 0; ) #nav li ( odsazení: 0; okraj: 3px; ) #nav li a ( zobrazení: blok; background-color: #e8e8e8; padding: 7px; margin: 0; text-decoration: none; color: #000; border-bottom: 1px solid #bbb; text-align: right; ) #nav li a::after ( obsah: """; barva: #aaa; váha písma: tučné; zobrazení: vložené; plovoucí: vpravo; okraj: 0 2px 0 5px; ) #nav li a:hover, #nav li a:focus ( pozadí: # f8f8f8; border-bottom-color: #777; ) #nav li a:hover::after ( margin: 0 0 0 7px; color: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )
První věc, kterou jsme udělali, aby menu vypadalo lépe, bylo odstranění odrážek nastavením atributu list-style:none a také nastavení paddingu a paddingu, protože výchozí hodnoty se mezi prohlížeči značně liší.
Všimněte si, že jsme pak určili, že odkazy by měly být vykresleny jako prvky na úrovni bloku. Nyní jsou při zobrazení roztaženy přes celou šířku prvku, ve kterém se nacházejí.
Další zajímavou věcí, kterou jsme použili pro menu, jsou pseudotřídy :before a :after. Umožňují vám přidat něco před a za prvek. Je to dobrý způsob, jak přidat ikony nebo symboly, jako je šipka na konec každého odkazu. Tento trik nefunguje v aplikaci Internet Explorer 7 a nižší.
Krok 4
A v neposlední řadě do našeho designu přidáme nějaké závoje pro ještě větší krásu.
#centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( rodina písem: Helvetica, Arial, sans- patka; váha písma: normální; barva: #666; ) h1 ( barva: #f93; okraj-dolní: 1px plný #ddd; mezera mezi písmeny: -0,05em; váha písma: tučné; horní okraj: 0; padding-top: 0; ) #bottom ( padding: 10px; font-size: 0,7em; color: #f03; ) #logo (font-size: 2em; text-align: center; color: #999; ) #logo silné ( font-weight: normal; ) #logo span ( display: block; font-size: 4em; line-height: 0.7em; color: #666; ) p, h2, h3 ( line-height: 1.6em; ) a ( barva: #f03; )
V těchto stylech jsme prvku #centered nastavili zaoblené rohy. V CSS3 to bude řešit vlastnost border-radius. Toto ještě není implementováno některými prohlížeči, kromě použití předpon -moz a -webkit pro Mozilla Firefox a Safari/Webkit.
Kompatibilita
Jak jste možná uhodli, hlavním zdrojem problémů s kompatibilitou je Internet Explorer:
- Prvek #floater musí být nastaven na šířku
- Další vycpávky kolem nabídek v IE 6
Velmi často je úkolem zarovnat blok na střed stránky/obrazovky, a to i tak, že bez java skriptu, bez nastavování tvrdých velikostí nebo záporných odsazení, aby posuvníky fungovaly na rodiči, pokud blok svou velikost přesáhne. Na netu je poměrně hodně monotónních příkladů, jak zarovnat blok na střed obrazovky. 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. Negativní výplň.
Polohování blok horní a levé atributy o 50 % a s vědomím výšky a šířky bloku předem nastavte záporný okraj, který se rovná polovině velikosti blok. Obrovskou nevýhodou této možnosti je, že musíte počítat záporné odrážky. Taky blok se v prostředí posuvníků chová ne zcela korektně – je jednoduše oříznut, protože má záporné odsazení.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: -125 pixelů 0 0 -125 pixelů; img ( max. šířka: 100 %; výška: auto; zobrazení: blok; okraj: 0 auto; ohraničení: žádný; ) )
Možnost 2: Automatické odsazení.
Méně časté, ale podobné prvnímu. Pro blok nastavte šířku a výšku, umístěte horní pravý dolní levý atribut na 0 a nastavte automatický okraj. 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 rigidní dimenzování.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; okraj: auto; img ( max. šířka: 100 %; výška: auto; displej: blok; okraj: 0 auto; okraj: žádný; ) )
Možnost 3. Tabulka.
Ptáme se rodič styly tabulky, buň rodič Nastavte zarovnání textu na střed. A blok nastavit model inline bloku. Nevýhodou jsou nefunkční posuvníky a obecně ani estetika „emulace“ tabulky.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 struktury přidat ještě jeden prvek.
Příklad: jsfiddle.net/serdidg/fk5nqh52/3 .Možnost 4. Pseudoprvek.
Tato volba postrádá všechny problémy uvedené v předchozích metodách a také řeší původní úlohy. Jde o to mít rodič nastavit styly pseudo prvek dříve, konkrétně 100% výška, zarovnání na střed a inline box model. Stejné s blok vložte model inline bloku, zarovnání na střed. Na blok nespadl pod pseudo prvek když rozměry prvního jsou větší než rodič, upřesněte rodič white-space: nowrap a font-size: 0, po kterém y blok zrušte tyto styly následujícím způsobem - white-space: normal. V tomto příkladu je potřeba font-size: 0, aby se odstranil výsledný prostor mezi rodič A blok související s formátováním kódu. Mezeru lze odstranit jinými způsoby, ale považuje se za nejlepší to prostě nedovolit.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 %; display: inline-block; vertical-align: middle; content: ""; ) ) .block ( display: inline-block; white-space: normal; vertical-align: middle; text-align: left ; img ( display: block; border: none; ) )
Nebo pokud chcete, aby rodič zabíral pouze výšku a šířku okna, nikoli 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 %; display: inline-block; vertical-align: middle; content: ""; ) ) .block ( display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img ( display: block; border: none; ) )
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 má vysokou flexibilitu. Jediné, na co je třeba při výběru této metody pamatovat, je podpora IE od verze 10 včetně. caniuse.com/#feat=flexboxRodič ( šíř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 funkce translate() css. Hodnota 50 % absolutní pozice umístí levý horní roh rámečku přesně do středu, poté záporná hodnota překladu posune rámeček 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. Podobná metoda může také vést k problémům s výpočtem polohy bloku pomocí java-scriptu "a. Někdy, aby se kompenzovala ztráta 50 % šířky v důsledku použití vlastnosti left css, pravidlo nastavené na blok může pomoci: 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 ( display: block; ) )
Možnost 7. Tlačítko.
Uživatelská možnost kde blok zabalené do knoflíku. Tlačítko má schopnost vycentrovat vše, co je uvnitř, tedy prvky inline a block-line (inline-block) modelu. V praxi to nedoporučuji.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 ( display: block;; border: none; ) )
Bonus
Pomocí myšlenky 4. možnosti můžete nastavit okraje pro blok, a ten se zároveň adekvátně zobrazí v prostředí posuvníků.
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 velkého obrázku:Dnešní článek si klade za cíl ukázat vám, jak pomocí několika CSS triků vycentrovat div, horizontálně i vertikálně. Ukážeme vám také, jak vycentrovat celou stránku nebo v jediném prvku div.
Jednoduché centrování prvku DIV na stránce
Tato metoda bude fungovat dobře ve všech prohlížečích.
css
Center-div ( okraj: 0 auto; šířka: 100px; )
Příklad
Hodnota auto ve vlastnosti margin nastaví levé a pravé odsazení na celý prostor dostupný na stránce. Zde je důležité si zapamatovat, že centrovaný div musí mít nastavenou šířku.
Centrování DIV uvnitř prvku DIV starým způsobem
Tato metoda center div bude fungovat ve všech prohlížečích.
css
Outer-div ( padding: 30px; ) .inner-div ( margin: 0 auto; width: 100px; )
HTML
Příklad
Vnější div lze umístit, jak chcete, ale vnitřní div musí mít specifikovanou šířku ( šířka).
Centrování DIV uvnitř prvku DIV s vloženým blokem
Při této metodě centrování prvku div uvnitř prvku div není nutné zadávat šířku vnitřního prvku. Bude fungovat ve všech moderních prohlížečích včetně IE8.
css
Outer-div ( padding: 30px; text-align: center; ) .inner-div ( display: inline-block; padding: 50px; )
HTML
Příklad
Vlastnost text-align funguje pouze u vložených prvků. Hodnota inline-block umožňuje, aby byl vnitřní prvek div vykreslen jako vložený prvek i jako blok ( inline blok). Vlastnost text-align na vnějším prvku div nám umožní vycentrovat vnitřní prvek div .
Centrování DIV uvnitř prvku DIV vodorovně a svisle
Here margin: auto se používá k vystředění prvku div na střed stránky. Příklad bude fungovat ve všech moderních prohlížečích.
css
Outer-div ( padding: 30px; ) .inner-div ( margin: auto; width: 100px; height: 100px; )
HTML
Příklad
Vnitřní div musí mít šířku ( šířka) a výška ( výška). Tato metoda nebude fungovat, pokud má vnější div pevnou výšku.
Vystředění DIV ve spodní části stránky
Zde se margin: auto používá ke svislému vystředění div a absolutní umístění se používá pro vnější prvek. Metoda bude fungovat ve všech moderních prohlížečích.
css
Outer-div ( pozice: absolutní; dolní: 30px; šířka: 100 %; ) .inner-div ( margin: 0 auto; šířka: 100px; výška: 100px; barva pozadí: #ccc; )
HTML
Příklad
Vnitřní div musí mít nastavenou šířku. Prostor v dolní části stránky je upraven pomocí vlastnosti bottom vnějšího div . Div můžete také vycentrovat na horní část stránky tím, že nahradíte vlastnost bottom vlastností top.
Vystředění DIV na stránce svisle a vodorovně
Zde se pro zarovnání divu na střed opět použije margin: auto a vnější prvek div je umístěn absolutně. Metoda bude fungovat ve všech moderních prohlížečích.
css
Center-div ( pozice: absolutní; okraj: auto; nahoře: 0; vpravo: 0; dole: 0; vlevo: 0; šířka: 100px; výška: 100px; )
Příklad
Element div musí mít nastavenou šířku ( šířka) a výška ( výška).
Responzivní centrování prvku DIV na stránce
Zde, abychom vycentrovali div pomocí CSS, nastavíme šířku prvku div tak, aby reagovala na změnu velikosti okna. Tato metoda funguje ve všech prohlížečích.
css
Center-div ( margin: 0 auto; max-width: 700px; )
Příklad
Středový prvek div musí mít nastavenou vlastnost max-width.
Centrování DIV uvnitř prvku pomocí vlastností vnitřního bloku
Vnitřní div zde reaguje. Tato metoda centrování prvku div uvnitř prvku div bude fungovat ve všech prohlížečích.
css
Outer-div ( padding: 30px; ) .inner-div ( margin: 0 auto; max-width: 700px; )
HTML
Příklad
Vnitřní div musí mít nastavenou vlastnost max-width.
Centrování dvou citlivých divů vedle sebe
Zde máme dva responzivní divy vedle sebe. Tato metoda centrování div na obrazovce bude fungovat ve všech moderních prohlížečích.
css
Container ( text-align: center; ) .left-div ( display: inline-block; max-width: 300px; vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) obrazovka a (max. šířka: 600 pixelů) ( .left-div, .right-div (lef max-width: 100 %; ) )
HTML
Příklad
Zde máme několik prvků s vlastností inline-block aplikovanou uvnitř centrovaného kontejneru. Tento příklad také používá dotazy na média CSS; to znamená, že pokud je velikost obrazovky menší než 600 pixelů, pak je vlastnost max-width pro levý i pravý div nastavena na 100 %.
Element DIV vycentrovaný pomocí Flexboxu
Zde centrujeme CSS div pomocí Flexbox . Má usnadnit proces návrhu uživatelského rozhraní. Tento plugin podporují Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ a Android Browser 40+.
css
Kontejner ( display: flex; align-items: center; justify-content: center; height: 100vh; ) .item ( background-color: #f3f2ef; border-radius: 3px; width: 200px; height: 100px; )
- #boční
