Domov › Telefon › Horizontální centrování div. Absolutní horizontální a vertikální centrování

Horizontální centrování div. Absolutní horizontální a vertikální centrování

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í pseudo-prvek na nadřazený prvek, konkrétně 100% výšku, zarovnání na střed a model inline bloku. 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, 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 nastavit vnější okraje pro blok a zároveň se blok 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:

Pokud se zaříznete do jakéhokoli webu vytvořeného na bázi html, uvidíte určitou vrstvenou strukturu. Navíc bude jeho vzhled podobný vrstvenému dortu. Pokud si to myslíte, pak jste s největší pravděpodobností dlouho nejedli. Nejprve tedy uspokojte svůj hlad a pak vám řekneme, jak vycentrovat vrstvu div na vašem webu:

Výhody rozložení pomocí tagu

Existují dva hlavní typy struktury webu:

Tabelární;
Blok.

Tabulkové uspořádání bylo dominantní i na úsvitu internetu. Mezi jeho přednosti patří přesnost zadaného polohování. Má však zjevné nedostatky. Mezi hlavní patří délka kódu a nízká rychlost načítání.

Při použití tabulkového uspořádání se webová stránka nezobrazí, dokud nebude zcela načtena. Při použití bloků div se prvky zobrazí okamžitě.

Kromě vysoké rychlosti načítání vám bloková konstrukce webu umožňuje několikanásobně snížit množství html kódu. Včetně použití tříd CSS.

Pro strukturování zobrazení dat na stránce by však mělo být použito tabulkové uspořádání. Klasickým příkladem jeho použití je zobrazení tabulek.

Konstrukce bloků založená na značkách se také nazývá vrstva po vrstvě a samotné bloky se nazývají vrstvy. Je to proto, že když jsou použity určité hodnoty vlastností, mohou být naskládány na sebe, podobně jako vrstvy ve Photoshopu.

Polohovací pomůcky

V blokovém rozložení je lepší umístit vrstvy pomocí kaskádových stylů. Hlavní CSS vlastnost zodpovědná za layout je float.
Syntaxe vlastnosti:
plovák: vlevo | vpravo | žádný | zdědit
Kde:

vlevo – zarovná prvek k levému okraji obrazovky. Obtékání zbývajících prvků probíhá vpravo;
vpravo – zarovnání vpravo, obtékání dalších prvků – vlevo;
žádné – obalování není povoleno;
dědit – převezme hodnotu nadřazeného prvku.

Podívejme se na odlehčený příklad umístění divů pomocí této vlastnosti:

#left ( šířka: 200px; výška: 100px; plovoucí: levý; pozadí: rgb(255,51,102); ) #right ( šířka: 200px; výška: 100px; plovoucí: pravý; pozadí: rgb(0,255,153); ) Levý blok Pravý blok

Nyní se pokusíme použít stejnou vlastnost k umístění třetího prvku div do středu stránky. Ale bohužel float nemá středovou hodnotu. A když dáte novému bloku hodnotu zarovnání doprava nebo doleva, posune se v určeném směru. Zbývá tedy pouze nastavit float: doleva na všechny tři bloky:

Ale ani to není nejlepší varianta. Při zmenšení okna se všechny vrstvy seřadí svisle do jedné řady a při zvětšení se přilepí k levému okraji okna. Takže potřebujeme lepší způsob, jak vycentrovat div.

Centrovací vrstvy

V dalším příkladu použijeme kontejnerovou vrstvu, do které umístíme zbývající prvky. Tím je vyřešen problém vzájemného pohybu bloků při změně velikosti okna. Centrování kontejneru na střed se provádí nastavením vlastností okraje na nulu pro okraje od horního okraje a auto po stranách (margin: 0 auto ):

#container ( šířka: 600px; margin: 0 auto; ) #left ( šířka: 200px; výška: 100px; plovoucí: vlevo; pozadí: rgb(255,51,102); ) #right ( šířka: 200px; výška: 100px; plovoucí : left; background: rgb(0,255,153); #center ( šířka: 200px; výška: 100px; float: left; background: rgb(255,0,0); ) Levý blok Středový blok Pravý blok);

Stejný příklad ukazuje, jak můžete prvek div vycentrovat vodorovně. A pokud výše uvedený kód trochu upravíte, můžete dosáhnout vertikálního zarovnání bloků. K tomu stačí změnit délku vrstvy kontejneru (zmenšit ji). To znamená, že po úpravě by její třída css měla vypadat takto:

Po změně se všechny bloky seřadí přesně do řady uprostřed. A jejich pozice se nezmění bez ohledu na velikost okna prohlížeče. Takto vypadá vertikální centrování div:

V následujícím příkladu jsme použili řadu nových vlastností css k vystředění vrstev uvnitř kontejneru:

#container ( width: 450px; height:150px; margin:0 auto; background-color:#66CCFF; ) #left ( width: 100px; height: 100px; background: rgb(255,51,102); display: inline-block; vertical-align: middle; margin-left: 35px; ) #right ( šířka: 100px; výška: 100px; background: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; ) #center ( šířka: 100px; výška: 100px; pozadí: rgb(255,0,0); display: inline-block; vertical-align: middle; margin-left: 35px; )

Krátký popis vlastností css a jejich hodnot, které jsme v tomto příkladu použili k vycentrování prvku div v prvku div:

display: inline-block – zarovná prvek bloku do čáry a zajistí, že se obalí kolem jiného prvku;
vertical-align: middle – zarovná prvek na střed vzhledem k nadřazenému prvku;
margin-left – nastaví levý okraj.

Jak vytvořit odkaz z vrstvy

Jakkoli to může znít divně, je to možné. Někdy může být při rozvržení různých typů nabídek potřeba blok div jako odkaz. Podívejme se na praktický příklad implementace odkazové vrstvy:

#layer1( šířka: 500px; výška: 100px; pozadí: rgb(51,255,204); border:groove; ) a ( display: block; text-align: center; height: 100%; color: rgb(255,0,51) ) Odkaz na náš web

V tomto příkladu pomocí řádku zobrazení: blok nastavíme vazbu na hodnotu prvku bloku. A aby se celá výška bloku div stala spojnicí, nastavte výšku : 100 %.

Skrytí a zobrazení prvků bloku

Blokové prvky poskytují více příležitostí k rozšíření funkčnosti rozhraní než zastaralé tabulkové uspořádání. Často se stává, že design webu je jedinečný a rozpoznatelný. Ale za takovou exkluzivitu musíte zaplatit nedostatkem volného místa.

To platí zejména pro hlavní stránku, na které jsou náklady na inzerci nejvyšší. Vyvstává tedy problém, kam „strčit“ další reklamní banner. A tady vám nemůže uniknout zarovnání divu na střed stránky!

Racionálnějším řešením je skrýt nějaký blok. Zde je jednoduchý příklad takové implementace:

#layer1( display:block; width: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) else ( vrstva1="none"; ) document.getElementById("vrstva1").style.display=vrstva1)

Toto je kouzelné tlačítko. Kliknutím na něj skryjete nebo zobrazíte skrytý blok.

V tomto příkladu se umístění bloků div žádným způsobem nemění. To používá jednoduchou funkci JavaScript, která změní hodnotu vlastnosti zobrazení css po kliknutí na tlačítko (událost onclick).

Jak vidíte, tato vlastnost může nabývat mnoha hodnot. Proto je velmi užitečný a lze jej použít k umístění prvků. V jednom z předchozích příkladů jsme použili jednu z jeho hodnot (inline-block ) k vystředění prvku div v prvku div.

Pro skrytí a zobrazení vrstvy jsme použili dvě hodnoty pro vlastnost display.

Při vytváření rozvržení webové stránky jste pravděpodobně narazili na situaci, kdy potřebujete pomocí CSS vycentrovat prvek div horizontálně a vertikálně. Existuje několik způsobů použití CSS a JQuery.

Nejprve ale základy:

Horizontální zarovnání pomocí CSS

Název třídy(
okraj:0 auto;
šířka:200px;
výška:200px;
}

Chcete-li prvek div vycentrovat pouze vodorovně, musíte zadat šířku a automatickou hodnotu pro levý a pravý okraj (toto je zkrácený formulář pro psaní vlastností CSS). Tato metoda funguje na prvcích bloku (div, p, h1 atd.). Chcete-li jej použít na lineární prvky (jako jsou hypertextové odkazy a obrázky), musíte napsat další pravidlo: display:block .

Horizontální a vertikální zarovnání pomocí CSS

Současné centrování div vodorovně a svisle je trochu složitější. Velikosti div musíte znát předem.

Název třídy(
šířka:300px;
výška:200px;
poloha:absolutní;
vlevo: 50 %;
horní: 50 %;
margin:-100px 0 0 -150px;
}

Pomocí absolutního umístění prvků jej můžeme vytáhnout z toku a nastavit jeho polohu vůči oknu prohlížeče. Nastavením posunu div na 50 % od levé a horní části okna vycentrujeme levý horní roh vzhledem ke stránce. Jediné, co zbývá udělat, je posunout prvek div doleva a nahoru o polovinu jeho šířky a výšky a nastavit záporný okraj tak, aby byl dokonale vycentrován.

Horizontální a vertikální zarovnání s jQuery

Jak již bylo řečeno, výše uvedená metoda CSS funguje pouze s divs s pevnou velikostí. JQuery přichází na záchranu:

// deklarace funkce:
$(window).resize(function())(
$(".název-třídy").css((
pozice: "absolutní",
vlevo: ($(window).width() - $(".class-name").outerWidth())/2,
nahoře: ($(window).height() - $(".class-name").outerHeight())/2
});
});
// volání funkce:
$(okno).resize();

Funkce vypočítá šířku okna v $(window).resize() vždy, když uživatel změní velikost okna. Používáme externalWidth() a externalHeight(), protože na rozdíl od běžných width() a height() přidávají výplň a šířku okraje a vracejí velikost. Nakonec se přizpůsobíme při změně velikosti okna a vycentrujeme div, když se stránka znovu načte.

Cílem dnešního článku je ukázat vám, jak vycentrovat div, horizontálně i vertikálně, pomocí několika CSS triků. Také vám řekneme, jak vycentrovat přes celou stránku nebo v jednotlivém prvku div.

Jednoduše vycentrujte prvek DIV na stránce

Tato metoda bude fungovat perfektně ve všech prohlížečích.

CSS

Center-div ( okraj: 0 auto; šířka: 100px; )

Příklad

Hodnota auto ve vlastnosti margin nastavuje levý a pravý okraj na celý prostor dostupný na stránce. Zde je důležité si zapamatovat, že vycentrovaný prvek div musí mít nastavenou hodnotu šířky.

Centrování DIV uvnitř prvku DIV starým způsobem

Tato metoda div zarovnání na střed 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 libovolným způsobem, ale vnitřní div musí mít určenou šířku (šířku).

Centrování DIV uvnitř prvku DIV pomocí inline-block

Při této metodě centrování prvku div v rámci prvku div není nutné specifikovat šíř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 zobrazit vnitřní prvek div jako vložený prvek a také jako blok (inline-block). Vlastnost text-align na vnějším prvku div nám umožní vycentrovat vnitřní prvek div.

Vycentrujte DIV uvnitř prvku DIV vodorovně a svisle

Zde se margin: auto používá k vystředění prvku div do středu 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í prvek div musí mít zadanou šířku (šířku) a výšku (výšku). Tato metoda nebude fungovat, pokud má vnější prvek div pevnou výšku.

Vycentrujte DIV v dolní části stránky

Zde margin: auto se používá pro vertikální vystředění divu 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 v horní části stránky nahrazením vlastnosti bottom vlastností top.

Vycentrujte prvky DIV na stránce svisle a vodorovně

Zde pro vystředění divu opět použijeme margin: auto a absolutní umístění vnějšího divu. 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

Prvek div musí mít šířku (šířku) a výšku (výšku).

Provedení adaptivního centrování prvku DIV na stránce

Zde, abychom vycentrovali div pomocí CSS, přizpůsobíme šířku prvku div tak, aby reagovala na změny velikosti okna. Tato metoda funguje ve všech prohlížečích.

CSS

Center-div ( margin: 0 auto; max-width: 700px; )

Příklad

Vycentrovaný prvek div musí mít nastavenou vlastnost max-width.

Centrování DIV uvnitř prvku pomocí vlastností vnitřního bloku

Vnitřní prvek div je zde citlivý. 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 vedle sebe dva responzivní prvky div. Tento způsob umístění prvku div do středu obrazovky 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 aplikovanou vlastností inline-block umístěných uvnitř vycentrované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 vycentrujeme CSS div pomocí Flexboxu. Je určen k usnadnění procesu vývoje návrhů uživatelského rozhraní. Tento modul podporují Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ a také prohlížeč Android 40+.

CSS

Kontejner ( display: flex; align-items: center; justify-content: center; height: 100vh; ) .item ( background-color: #f3f2ef; border-radius: 3px; width: 200px; height: 100px; )

V CSS se některé zdánlivě jednoduché věci nedělají tak snadno. Jednou z těchto 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á pomohou zjednodušit práci centrovacích prvků vodorovně a/nebo svisle.

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 - Center Align Block

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

... ...

Rodič ( pozice: relativní; ) .child ( pozice: absolutní; vlevo: 50 %; nahoře: 50 %; -webkit-transform: translate(-50 %, -50 %); -moz-transform: translate(-50 % , -50%) -ms-transform: přeložit (-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 )