... Dokonca aj s príchodom HTML5 a objavením sa vážnych konkurentov vo forme článku alebo hlavičky sa naďalej všade vkladá do značiek. Preto navrhujem, aby ste pochopili otázku formátovania a centrovania divov.

Čo je DIV

Názov prvku pochádza z anglického slova division, čo v preklade znamená delenie. Pri písaní značiek sa používa na rozdelenie prvkov do blokov. DIV ohraničujú skupiny obsahu na webovej stránke. Napríklad obrázky, odseky s textom. Tag žiadnym spôsobom neovplyvňuje zobrazenie obsahu a nenesie žiadnu sémantickú záťaž.

DIV podporuje všetky globálne atribúty. Na webdizajn ale potrebujete len dve – class a id. Všetko ostatné si zapamätáte len v exotických prípadoch, a to nie je pravda. Atribút zarovnania, ktorý sa predtým používal na zarovnanie prvkov div na stred alebo doľava, je zastaraný.

Kedy použiť DIV

Predstavte si, že stránka je chladnička a DIV sú plastové nádoby, do ktorých musíte triediť obsah. Ovocie nedáte do tej istej nádoby ako jaternice. Každý druh produktu vložíte samostatne. Podobne sa generuje webový obsah.

Otvorte ľubovoľnú stránku, rozdeľte ju do sémantických blokov. V hornej časti je hlavička, v dolnej časti je päta, v strede je hlavný text. Na bočnej strane je zvyčajne menší stĺpec s obsahom reklamy alebo tag cloud.

Teraz rozoberte každú sekciu podrobnejšie. Začnite hlavičkou. Hlavička stránky má samostatné logo, navigáciu, nadpis prvej úrovne a niekedy aj slogan. Ku každému sémantickému bloku priraďte kontajner. To nielen oddeľuje prvky v streame, ale uľahčuje aj ich formátovanie. Bude pre vás oveľa jednoduchšie vycentrovať objekt v tagu DIV tak, že mu priradíte triedu alebo ID.

Zarovnanie prvkov DIV na stred s okrajmi

Pri vykresľovaní webových prvkov prehliadač berie do úvahy tri vlastnosti: padding, marging a border. Výplň je priestor medzi obsahom a jeho okrajom. Okraj – polia, ktoré oddeľujú jeden objekt od druhého. Hranice sú čiary pozdĺž blokov. Môžu byť priradené zo všetkých naraz alebo len z jednej strany:

div (okraj: 1px plný # 333; ľavý okraj: žiadny;)

Tieto vlastnosti pridávajú biele miesta medzi objekty a tiež pomáhajú pri ich zarovnaní a umiestnení podľa potreby. Ak je napríklad potrebné posunúť rámček obrázka od ľavého okraja k stredu o 20 %, priradíte prvku ľavý okraj s hodnotou 20 %:

Block-with-img (okraj vľavo: 20%;)

Prvky možno formátovať aj pomocou ich šírky a záporných okrajov. Napríklad existuje blok s rozmermi 200 x 200 pixelov. Najprv mu dajte absolútnu polohu a posuňte ho o 50 % smerom k stredu.

Div (pozícia: absolútna; ľavá: 50 %;)

Teraz, aby bol DIV dokonale vycentrovaný, dajte mu záporný ľavý okraj rovný 50 % jeho šírky, teda -100 pixelov:

Ľavý okraj: -100px;

V CSS sa to nazýva „odvzdušňovanie“. Má to však značnú nevýhodu v potrebe robiť neustále výpočty, čo je dosť ťažké pre prvky s niekoľkými úrovňami vnorenia. Ak je zadaná výplň a šírka okraja, prehliadač predvolene vypočíta veľkosť kontajnera ako súčet šírky okrajov, výplne vpravo a vľavo a samotného obsahu vo vnútri, čo môže byť tiež prekvapením. .

Takže keď potrebujete vycentrovať DIV, použite vlastnosť box-sizing s border-box. To zabráni prehliadaču pridať hodnoty výplne a okraja do celkovej šírky prvku DIV. Na zvýšenie alebo zníženie prvku použite aj záporné hodnoty. Ale v tomto prípade môžu byť priradené buď k hornému alebo dolnému poľu kontajnera.

Ako zarovnať blok DIV na stred pomocou automatických okrajov

Toto je jednoduchý spôsob, ako vycentrovať veľké bloky. Šírku kontajnera a vlastnosť margin priradíte k funkcii auto. Prehliadač umiestni blok do stredu s rovnakými okrajmi vľavo a vpravo, pričom všetku prácu vykoná sám. Vďaka tomu neriskujete zmätok v matematických výpočtoch a výrazne šetríte svoj čas.

Pri vývoji responzívnych aplikácií použite metódu automatického okraja. Hlavná vec je dať kontajneru hodnotu šírky v em alebo percentách. Kód z vyššie uvedeného príkladu vycentruje DIV a na akomkoľvek zariadení, vrátane mobilných telefónov, bude zaberať 90 % obrazovky.

Zarovnanie cez zobrazenie: vlastnosť inline-block

Štandardne sa DIV považujú za blokované a zobrazenie je nastavené na blokovanie. Pre túto metódu budete musieť túto vlastnosť prepísať. Vhodné len pre DIV s nadradeným kontajnerom:

Element s triedou external-div má priradenú vlastnosť zarovnania textu s hodnotou center, ktorá vycentruje text vo vnútri. Prehliadač však zatiaľ vidí vnorený DIV ako blokový objekt. Aby vlastnosť text-align fungovala, musí byť internal-div považovaný za vložený. Takže do vašej tabuľky CSS pre selektor vnútorného divu napíšete nasledujúci kód:

Inner-div (zobrazenie: inline-block;)

Vlastnosť zobrazenia meníte z bloku na vložený blok.

Metóda transformácie / prekladu

Kaskádové štýly vám dávajú možnosť ľubovoľne presúvať, skosiť, otáčať a transformovať prvky webu. Používa sa na to vlastnosť transform. Požadovaný typ a stupeň konverzie sú uvedené ako hodnoty. V tomto príklade budeme pracovať s prekladom:

transformovať: preložiť (50 %, 50 %);

Funkcia prekladu presunie prvok z jeho aktuálnej pozície doľava/doprava a nahor/nadol. V zátvorkách sú uvedené dve hodnoty:

• stupeň horizontálneho pohybu;
• stupeň vertikálneho pohybu.

Ak je potrebné presunúť prvok iba pozdĺž jednej zo súradnicových osí, potom za slovom preložiť zadajte názov osi a hodnotu požadovaného posunu v zátvorkách:

Transform: translateY (-20%);

V niektorých tutoriáloch môžete vidieť transformáciu s predponami dodávateľa:

Webkit-transform: translate (50%, 50%); -ms-transform: preložiť (50%, 50%); transformovať: preložiť (50 %, 50 %);

V roku 2018 to už nemusíte robiť, vlastnosť podporujú všetky prehliadače vrátane Edge a IE.

Aby sa požadovaný DIV vycentroval, funkcia translate CSS je napísaná s hodnotou 50 % pre vertikálnu a horizontálnu os. To spôsobí, že prehliadač odsadí prvok od jeho aktuálnej polohy o polovicu jeho šírky a výšky. Vlastnosti šírky a výšky musia byť špecifikované:

Majte na pamäti, že prvok, na ktorý sa aplikuje vlastnosť transform, sa pohybuje nezávisle od okolitých objektov. Na jednej strane je to pohodlné, ale niekedy posunutím môže DIV prekrývať iný kontajner. Preto je tento spôsob centrovania komponentov siete považovaný za neštandardný a používa sa len v nevyhnutných prípadoch. Na animáciu sa používajú transformácie vo všetkých kánonoch CSS.

Práca s rozložením Flexbox

Flexbox sa považuje za zložitý spôsob rozloženia webových rozložení. Ale ak si to osvojíte, pochopíte, že je to oveľa jednoduchšie a príjemnejšie ako štandardné spôsoby formátovania. Špecifikácia Flexbox je flexibilný a neuveriteľne výkonný spôsob manipulácie s prvkami. Názov modulu je preložený z angličtiny ako „flexibilný kontajner“. Hodnoty šírky, výšky, polohy prvkov sa upravujú automaticky, bez výpočtu zarážok a okrajov.

V predchádzajúcich príkladoch sme už pracovali s vlastnosťou display, no nastavili sme ju na hodnoty block a inline-block. Na vytvorenie flexibilných rozložení použijeme display: flex. Najprv potrebujeme flexibilnú nádobu:

Ak ho chcete previesť na flex kontajner v kaskádových tabuľkách, napíšeme:

Flex-kontajner (displej: flex;)

Všetky vnorené objekty, ale iba priami potomkovia, budú flexibilné položky:

Ak umiestnite zoznam do flexibilného kontajnera, potom sa položky li nepovažujú za flexibilné položky. Rozloženie Flexbox bude fungovať iba na ul:

Pravidlá umiestnenia položiek Flex

Ak chcete spravovať flexibilné položky, potrebujete zarovnať obsah a zarovnať položky. Na základe zadaných hodnôt tieto dve vlastnosti automaticky umiestňujú objekty podľa potreby. Ak potrebujeme vycentrovať všetky vnorené prvky DIV, napíšeme justify-content: center, align-items: center a nič iné. Prehliadač urobí zvyšok práce sám:

Na zarovnanie textu na stred na DIV, ktoré sú flexibilnými položkami, môžete použiť štandardnú techniku ​​zarovnania textu. Alebo môžete prinútiť každý vnorený DIV tiež ohýbať kontajnery a manipulovať s obsahom pomocou justify-content. Táto metóda je oveľa racionálnejšia, ak obsahuje rôznorodý obsah vrátane grafiky, iných vnorených objektov vrátane viacúrovňových zoznamov.

Dnes, vážený čitateľ, sa budeme zaoberať problémom vertikálneho vyrovnania v bloku. div.

Je pravdepodobné, že už viete o nádhernej vlastnosti CSS vertikálne zarovnať. A sám Boh nám povedal, aby sme túto vlastnosť použili na vertikálne zarovnanie (nie nadarmo má taký samovysvetľujúci názov).

Formulácia problému: Obsah bloku s premennou výškou je potrebné vycentrovať vzhľadom na vertikálu.

Teraz prejdime k riešeniu problému.

A tak máme blok, jeho výška sa môže meniť:

Prvá vec, ktorá vás napadne, je urobiť nasledujúci trik:

Existuje každý dôvod domnievať sa, že táto fráza Blokovať obsah sa zarovná do stredu výšky kontajnera div.

Ale to tam nebolo! Týmto spôsobom nedosiahneme žiadne očakávané zarovnanie stredu. A prečo? Zdá sa, že všetko je uvedené správne. Ukazuje sa, že toto je ten háčik: majetok vertikálne zarovnať možno použiť iba na zarovnanie obsahu buniek tabuľky alebo na vzájomné zarovnanie vložených prvkov.

Pokiaľ ide o zarovnanie v bunke tabuľky, myslím, že je všetko jasné. Vysvetlím ďalší prípad s vloženými prvkami.

Vertikálne zarovnanie inline prvkov

Predpokladajme, že máte reťazec textu, ktorý je rozdelený pomocou vložených značiek na časti:

vy víta kus text!

Inline tag je chápaný ako kontajner, ktorého vzhľad nevedie k zalamovaniu obsahu do nového riadku.

Činnosť blokového tagu vedie k zabaleniu obsahu kontajnera na nový riadok.

Je bloková značka. Ak uzatvoríme kusy textu do blokov

, potom sa každý z nich objaví na novom riadku. Použitie značky ktoré na rozdiel od

, je malé, nebude sa baliť kontajnery do nového riadku, všetky kontajnery zostať na jednom riadku.

Kontajner Je vhodné ho použiť pri zadávaní časti textu špeciálnym formátovaním (zvýraznenie farbou, iné písmo atď.)

Pre kontajnery použite nasledujúce vlastnosti CSS:

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

V dôsledku toho bude riadok textu vyzerať takto:

Nejde o nič iné ako o vertikálne zarovnanie vložených prvkov a vlastnosť CSS vertikálne zarovnať dokonale zvláda túto úlohu.

Trochu odbočíme, teraz sa vrátime k našej hlavnej úlohe.

Vertikálne zarovnanie v kontajneri div

Bez ohľadu na to použijeme vlastnosť na zarovnanie vnútri kontajnera div. vertikálne zarovnať... Ako som už povedal, túto vlastnosť je možné použiť v prípade zarovnania inline prvkov (tento prípad sme podrobne rozobrali vyššie a na zarovnanie v kontajneri div nám nevyhovuje); ostáva len využiť fakt, že vertikálne zarovnať funguje pre bunky tabuľky.

Ako to môžeme použiť? Stôl nemáme, pracujeme s div nádobou.

Ha, ukázalo sa, že je to veľmi jednoduché.

Vlastnosť CSS displej nám umožňuje zmeniť náš blok div na bunku tabuľky, dá sa to urobiť jednoducho a prirodzene:

Urobme triedny div zarovnanie textu:

Pre tento blok zadajte nasledujúcu vlastnosť CSS:

Zarovnanie textu (zobrazenie: tabuľka-bunka;)

Táto inštrukcia CSS zázračne zmení náš div na bunku tabuľky bez toho, aby ju akýmkoľvek spôsobom vizuálne zmenila. A pre bunku tabuľky môžeme použiť vlastnosť vertikálne zarovnať požadované vertikálne zarovnanie bude plne fungovať.

Všetko sa však nemôže skončiť tak jednoducho. Máme skvelý prehliadač IE. Nevie pracovať s majetkom displej: tabuľka-bunka(Odporúčam, aby ste sa oboznámili s tabuľkou znázorňujúcou výkon tejto vlastnosti CSS v rôznych prehliadačoch na webovej stránke htmlbook.ru). Preto budeme musieť prejsť na rôzne triky.

Existuje mnoho spôsobov, ako dosiahnuť zarovnanie v kontajneri div pre všetky prehliadače:

• Metóda s použitím dodatočného pomocného div cotneyer
• Metóda využívajúca výraz. Je spojená s premysleným výpočtom výšok blokov. Znalosť JavaScriptu je tu nevyhnutná.
• Použitie vlastnosti line-height. Táto metóda je vhodná len na vertikálne vyrovnanie v bloku známej výšky, čo znamená, že vo všeobecnosti nie je použiteľná.
• Použitie absolútneho a relatívneho posunu obsahu v prípade prehliadača IE. Táto metóda sa mi zdá najjasnejšia a najjednoduchšia. Je tiež implementovateľný pre kontajnerový div s premenlivou výškou. Budeme sa mu venovať podrobnejšie.

Ako ste pochopili, zostáva na nás vyriešiť problém vertikálneho zarovnania v IE, spojený s jeho nepochopením vlastnosti displej: tabuľka-bunka(ani IE6, ani IE7, ani IE8 túto vlastnosť nepoznáte). Preto pomocou podmienený komentár konkrétne pre prehliadače z rodiny IE upresníme ďalšie vlastnosti CSS.

Podmienený komentár

Typové prevedenie:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

sa nazýva podmienený komentár (pozor, forma podmieneného komentára musí plne zodpovedať danému príkladu, až na medzeru).

Pokyny obsiahnuté v takomto podmienenom komentári sa vykonajú iba vtedy, ak prehliadač interpretujúci tento kód patrí do rodiny IE.

Pomocou podmieneného komentára teda môžeme skryť kus kódu zo všetkých prehliadačov okrem IE.

Riešenie problému

Kvôli všetkej tejto petržlenovej vňate budeme musieť náš HTML nakŕmiť dvoma ďalšími kontajnermi. Náš textový blok bude vyzerať takto:

Pre triedu kontajner div zarovnanie textu nastavuje vlastnosti CSS, ktoré vertikálne zarovnajú jeho obsah pre všetky bežné prehliadače (okrem IE, samozrejme):

Displej: tabuľka-bunka; vertikálne zarovnať: stred;

A ďalšie dve vlastnosti, ktoré nastavujú šírku a výšku bloku:

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

To úplne stačí na zarovnanie obsahu kontajnera v strede vzhľadom na vertikálu vo všetkých prehliadačoch. okrem IE.

Teraz začneme pridávať vlastnosti súvisiace so zarovnaním. pre prehliadače rodiny IE(pre nich sme použili ďalšie bloky div a rozpätie):

S odkazom na značku div vnútri bloku triedy zarovnanie textu... Ak to chcete urobiť, musíte najprv zadať názov triedy a potom, oddelený medzerou, značku, na ktorú odkazujeme.

Divok zarovnania textu (pozícia: absolútna; horná časť: 50 %;)

Takáto konštrukcia znamená: pre všetky značky div vo vnútri bloku s triedou zarovnanie textu použiť uvedené vlastnosti.

Podľa toho štýly špecifikované pre blok zarovnanie textu sú upravené:

Zarovnanie textu (zobrazenie: tabuľka-bunka; zvislé zarovnanie: stred; šírka: 500px; výška: 500px; pozícia: relatívna;)

Ľavý horný bod textového poľa je teraz posunutý nadol o 50 %.

Aby som objasnil, čo sa deje, nakreslil som ilustráciu:

Ako môžete vidieť na obrázku, urobili sme určitý pokrok. Ale to nie je všetko! Ľavý horný bod žltého poľa sa skutočne posunul o 50 % nadol od nadradeného (fialového) poľa. Ale potrebujeme niečo na päťdesiat percent výšky fialového bloku stred žltého bloku, nie jej ľavý horný bod.

Teraz bude značka použitá rozpätie a jeho relatívne umiestnenie:

Rozsah zarovnania textu (pozícia: relatívna; horná časť: -50 %;)

Žltý blok sme teda posunuli smerom nahor o 50 % jeho výšky vzhľadom na východiskovú pozíciu. Ako si viete predstaviť, výška žltého poľa sa rovná výške vycentrovaného obsahu. A posledná operácia s kontajnerom na rozpätie umiestnila náš obsah do stredu fialového bloku. Hurá!

Malý šaman

V prvom rade musíme skryť petržlen zo všetkých bežných prehliadačov a otvoriť ho pre IE. Dá sa to urobiť, samozrejme, pomocou podmieneného komentára, nie nadarmo sme sa s tým oboznámili:

Je tu malý problém. Ak je vycentrovaný obsah príliš vysoký, vedie to k nepríjemným následkom: objaví sa dodatočná výška vertikálneho posúvania.

Riešenie: treba pridať nehnuteľnosť prepad: skrytý blokovať zarovnanie textu.

Spoznajte nehnuteľnosť podrobne pretečeniu môže byť v.

Konečný vzhľad inštrukcií bloku CSS zarovnanie textu vyzerá ako:

Zarovnanie textu (zobrazenie: tabuľka-bunka; zvislé zarovnanie: stred; šírka: 500px; výška: 500px; pozícia: relatívna; pretečenie: skryté; orámovanie: 1px plná čierna;)

Prepáčte, zabudol som spomenúť jeden dôležitý bod. Ak sa pokúsite nastavte výšku bloku triedy zarovnanie textu v percentách potom máš nič z toho nebude.

Centrovanie v bloku s premenlivou výškou

Veľmi často je potrebné nastaviť výšku bloku triedy. zarovnanie textu nie v pixeloch, ale v percentách výšky nadradeného bloku a zarovnajte obsah kontajnera div do stredu.

Háčik je v tom, že to nie je možné urobiť pre bunku tabuľky (a koniec koncov aj blok triedy zarovnanie textu premení na bunku tabuľky, vďaka nehnuteľnosti displej: tabuľka-bunka).

V tomto prípade musíte použiť externý blok, pre ktorý je špecifikovaná vlastnosť CSS displej: tabuľka a už pre ňu nastaviť percentuálnu hodnotu výšky. Potom sa do nej vnoril blok s direktívou CSS displej: tabuľka-bunka, veselo zdedí výšku rodičovského bloku.

Aby sme v našom príklade implementovali blok s premenlivou výškou, mierne upravíme CSS:

Trieda zarovnanie textu zmeníme hodnotu nehnuteľnosti displej s tabuľka-bunka na tabuľky a odstráňte smernicu o zarovnaní vertikálne zarovnať: stred... Teraz môžeme pokojne zmeniť hodnotu výšky z 500 pixelov napríklad na 100 %.

Teda vlastnosti CSS pre blok triedy zarovnanie textu bude vyzerať takto:

Zarovnanie textu (zobrazenie: tabuľka; šírka: 500px; výška: 100%; pozícia: relatívna; pretečenie: skryté; orámovanie: 1px plná čierna;)

Zostáva realizovať centrovanie obsahu. Na tento účel je kontajner div vnorený do bloku triedy zarovnanie textu(toto je ten istý žltý blok na obrázku), je potrebné nastaviť vlastnosť CSS displej: tabuľka-bunka potom zdedí 100 % výšky z nadradeného bloku zarovnanie textu(fialový blok). A nič nám nebráni zarovnať obsah vnoreného kontajnera div v strede s vlastnosťou vertikálne zarovnať: stred.

Získame ďalší dodatočný zoznam vlastností CSS pre div vnorený do kontajnera zarovnanie textu.

Div Textalign (zobrazenie: tabuľka-bunka; vertikálne-zarovnanie: stred;)

To je celý trik. Voliteľne môžete meniť výšku so centrovaným obsahom.

Ďalšie informácie o zvislom zarovnaní bloku s premenlivou výškou nájdete v časti.

Úlohou veľmi často je zarovnať blok na stred stránky/obrazovky, a to aj tak, že bez java skriptu, bez nastavenia tvrdých veľkostí alebo záporných okrajov, takže rolovacie lišty budú fungovať pre rodiča, ak blok prekročí svoju veľkosť . Na webe je veľa monotónnych príkladov, ako zarovnať blok na stred obrazovky. Väčšina z nich je spravidla založená na rovnakých princípoch.

Nižšie sú uvedené hlavné spôsoby riešenia problému, ich výhody a nevýhody. Aby ste pochopili podstatu príkladov, odporúčam zmenšiť výšku / šírku okna Výsledok v príkladoch na uvedených odkazoch.

Možnosť 1. Záporné odsadenie.

Polohovanie blokovať atribúty hore a doľava o 50 % a keďže vopred poznáme výšku a šírku bloku, nastavíme záporný okraj, ktorý sa rovná polovici veľkosti blokovať... Obrovskou nevýhodou tejto možnosti je, že musíte počítať so zápornými maržami. Rovnakým spôsobom blokovať sa nespráva celkom správne, keď je obklopený posúvačmi – je jednoducho odrezaný, pretože má záporné okraje.

Nadradený (šírka: 100 %; výška: 100 %; pozícia: absolútna; hore: 0; vľavo: 0; pretečenie: auto;) .block (šírka: 250px; výška: 250px; pozícia: absolútna; hore: 50 %; vľavo : 50 %; okraj: -125 pixelov 0 0 -125 pixelov; obr. (max. šírka: 100 %; výška: automaticky; zobrazenie: blok; okraj: 0 automaticky; okraj: žiadne;))

Možnosť 2. Automatické odsadenie.

Menej časté, ale podobné ako prvé. Pre blokovať nastavte šírku a výšku, umiestnite atribúty vľavo hore na 0 a nastavte automatický okraj. Výhodou tejto možnosti sú funkčné posuvníky pri rodič ak má 100% šírku a výšku. Nevýhodou tejto metódy je tuhé dimenzovanie.

Nadradený (šírka: 100 %; výška: 100 %; pozícia: absolútna; hore: 0; vľavo: 0; pretečenie: auto;) .block (šírka: 250px; výška: 250px; pozícia: absolútna; hore: 0; vpravo: 0; dole: 0; vľavo: 0; okraj: auto; obr. (maximálna šírka: 100 %; výška: auto; zobrazenie: blok; okraj: 0 auto; okraj: žiadny;))

Možnosť 3. Tabuľka.

Pýtame sa rodičštýly tabuľky, bunka rodič nastavte zarovnanie textu na stred. A blokovať nastaviť model čiarového bloku. Nevýhody, ktoré dostávame, sú nefunkčné posuvníky a vo všeobecnosti nie estetika „emulácie“ tabuľky.

Nadradený (šírka: 100 %; výška: 100 %; zobrazenie: tabuľka; pozícia: absolútna; hore: 0; vľavo: 0;> .inner (zobrazenie: tabuľka-bunka; zarovnanie textu: na stred; zvislé zarovnanie: na stred; )) .block (zobrazenie: inline-block; img (zobrazenie: blok; ohraničenie: žiadne;))

Ak chcete k tomuto príkladu pridať zvitok, budete musieť do konštrukcie pridať ešte jeden prvok.
Príklad: jsfiddle.net/serdidg/fk5nqh52/3.

Možnosť 4. Pseudoprvok.

Táto možnosť je zbavená všetkých problémov uvedených v predchádzajúcich metódach a rieši aj pôvodne nastavené úlohy. Pointa je taká rodič nastaviť štýly pseudoprvok predtým, konkrétne 100 % výška, zarovnanie na stred a model inline boxu. Rovnako je to s blokovať je nastavený model čiarového bloku, zarovnanie na stred. Komu blokovať"nespadol" pod pseudoprvok keď veľkosť prvého je väčšia ako rodič, uveďte rodič white-space: nowrap a font-size: 0 nasledované blokovať prepíšte tieto štýly nasledujúcimi - medzery: normálne. V tomto príklade je potrebná veľkosť písma: 0, aby sa odstránila výsledná medzera medzi nimi rodič a blokovať v súvislosti s formátovaním kódu. Priestor sa dá odstrániť aj inak, ale najlepšie je jednoducho to nedovoliť.

Nadradený prvok (šírka: 100 %; výška: 100 %; pozícia: absolútna; hore: 0; vľavo: 0; pretečenie: automatické; medzera: nowrap; zarovnanie textu: na stred; veľkosť písma: 0; &: pred ( výška: 100 %; zobrazenie: inline-block; vertical-align: middle; content: "";)) .block (display: inline-block; white-space: normal; vertical-align: middle; text-align: left ; img (zobrazenie: blok; orámovanie: žiadne;))

Alebo ak potrebujete, aby rodič zaberal iba výšku a šírku okna a nie celú stránku:

Rodič (pozícia: pevná; horná: 0; pravá: 0; spodná: 0; ľavá: 0; pretečenie: automatické; medzera: nowrap; zarovnanie textu: na stred; veľkosť písma: 0; &: pred (výška: 100 %; zobrazenie: inline-block; vertical-align: middle; content: "";)) .block (display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img (zobrazenie: blok; orámovanie: žiadne;))

Možnosť 5. Flexbox.

Jedným z najjednoduchších a najelegantnejších spôsobov je použitie flexboxu. Nevyžaduje zbytočné pohyby tela, celkom jasne popisuje podstatu toho, čo sa deje, má vysokú flexibilitu. Jediná vec, ktorú stojí za to pamätať pri výbere tejto metódy, je podpora IE od verzie 10 vrátane. caniuse.com/#feat=flexbox

Nadradená položka (šírka: 100 %; výška: 100 %; poloha: pevná; horná: 0; ľavá: 0; zobrazenie: ohyb; zarovnanie položiek: na stred; zarovnanie obsahu: na stred; zarovnanie obsahu: na stred; pretečenie: automatické; ) .block (pozadie: # 60a839; img (zobrazenie: blok; ohraničenie: žiadne;))

Možnosť 6. Transformácia.

Vhodné, ak sme obmedzení štruktúrou a s nadradeným prvkom nie je možné manipulovať a blok je potrebné nejako zarovnať. Na pomoc prichádza funkcia translate () css. Pri 50% absolútnom umiestnení sa umiestni ľavý horný roh rámčeka presne do stredu, potom záporná hodnota prekladu posunie rámček vzhľadom na jeho vlastné rozmery. Uvedomte si, že sa môžu objaviť negatívne efekty v podobe rozmazaných okrajov alebo štýlu písma. Táto metóda môže tiež viesť k problémom s výpočtom polohy bloku pomocou java-scriptu "a. Niekedy na kompenzáciu straty 50 % šírky v dôsledku použitia vlastnosti css left môže pravidlo nastavené pre blok pomoc: margin-right: -50%;.

Rodič (šírka: 100 %; výška: 100 %; poloha: pevná; horná: 0; ľavá: 0; prepad: auto;) .blok (pozícia: absolútna; horná: 50 %; ľavá: 50 %; transformácia: preložiť ( -50 %, -50 %); img (zobraziť: blok;))

Možnosť 7. Tlačidlo.

Používateľská možnosť kde blokovať je orámovaný v štítku tlačidla. Tlačidlo má schopnosť vycentrovať všetko, čo sa v ňom nachádza, konkrétne prvky inline a inline-block modelov. V praxi neodporúčam používať.

Rodič (šírka: 100 %; výška: 100 %; poloha: absolútna; hore: 0; vľavo: 0; pretečenie: automatické; pozadie: žiadne; ohraničenie: žiadne; obrys: žiadne;) .block (zobrazenie: inline-block; img (zobrazenie: blok;; orámovanie: žiadne;))

Bonus

Pomocou myšlienky 4. možnosti je možné nastaviť okraje pre blokovať a ten bude primerane zobrazený obklopený posúvačmi.
Príklad: jsfiddle.net/serdidg/nfqg9rza/2.

Môžete tiež zarovnať obrázok na stred a ak je obrázok väčší rodič, prispôsobte ho rodič.
Príklad: jsfiddle.net/serdidg/nfqg9rza/3.
Príklad s veľkým obrázkom:

Horizontálne a vertikálne zarovnanie prvkov môže byť vykonané rôznymi spôsobmi. Výber metódy závisí od typu prvku (blok alebo inline), od typu umiestnenia, rozmerov atď.

1. Horizontálne zarovnanie na stred bloku / strany

1.1. Ak má blok šírku:

div (šírka: 300px; okraj: 0 auto; / * vycentrovať prvok horizontálne v rámci rodičovského bloku * /)

Ak chcete takto zarovnať vložený prvok, je potrebné ho nastaviť na zobrazenie: blok;

1.2. Ak je blok vnorený do iného bloku a nie je preň nastavená žiadna šírka:

.wrapper (text-align: center;)

1.3. Ak má blok šírku a je potrebné ho pripevniť do stredu nadradeného bloku:

.wrapper (pozícia: relatívna; / * nastavenie relatívnej polohy pre nadradený rámček, aby sme neskôr mohli rámček v ňom úplne umiestniť * /) .box (šírka: 400px; pozícia: absolútna; vľavo: 50%; okraj- doľava: -200px; / * posun bloku doľava o vzdialenosť rovnajúcu sa polovici jeho šírky * /)

1.4. Ak pre bloky nie je zadaná žiadna šírka, môžete ich vycentrovať pomocou nadradeného bloku obalu:

.wrapper (zarovnanie textu: na stred; / * obsah bloku umiestnite do stredu * /) .box (zobrazenie: inline-block; / * usporiadajte bloky do radu vodorovne * / okraj-vpravo: -0,25em ; / * odstráňte pravú zarážku medzi blokmi * /)

2. Vertikálne zarovnanie

2.1. Ak text presahuje jeden riadok, napríklad pre tlačidlá a položky ponuky:

.button (výška: 50px; výška riadku: 50px;)

2.2. Ak chcete zarovnať blok vertikálne v rámci nadradeného bloku:

.wrapper (pozícia: relatívna;) .box (výška: 100px; pozícia: absolútna; hore: 50%; okraj: -50px 0 0 0;)

2.3. Vertikálne zarovnanie podľa typu tabuľky:

.wrapper (zobrazenie: tabuľka; šírka: 100 %;) .box (zobrazenie: tabuľka-bunka; výška: 100px; zarovnanie textu: na stred; zvislé zarovnanie: na stred;)

2.4. Ak má blok šírku a výšku a je potrebné ho vycentrovať na nadradený blok:

.wrapper (pozícia: relatívna;) .box (výška: 100px; šírka: 100px; pozícia: absolútna; horná: 0; pravá: 0; spodná: 0; ľavá: 0; okraj: auto; pretečenie: automatické; / * do obsah sa nevkrádal * /)

2.5. Absolútne umiestnenie v strede stránky / bloku pomocou transformácie CSS3:

ak je prvok dimenzovaný

div (šírka: 300px; / * nastavenie šírky bloku * / výška: 100px; / * nastavenie výšky bloku * / transformácia: preložiť (-50 %, -50 %); pozícia: absolútna; hore: 50 %; vľavo: 50% ;)

ak prvok nie je kótovaný a nie je prázdny

h1 (okraj: 0; transformácia: preložiť (-50 %, -50 %); pozícia: absolútna; hore: 50 %; vľavo: 50 %;)

Veľmi často je v rozložení potrebné vycentrovať niektorý prvok horizontálne a / alebo vertikálne. Preto som sa rozhodla spraviť článok s rôznymi metódami centrovania, aby bolo všetko po ruke na jednom mieste.

Horizontálne zarovnanie

okraj: auto

Horizontálne zarovnanie s okrajom sa používa, keď je známa šírka centrovaného prvku. Funguje pre blokové prvky:

Prvok (ľavý okraj: automatický; pravý okraj: automatický; šírka: 50 %;)

Zadaním automatickej hodnoty pre pravú a ľavú výplň sa zhodujú, čím sa prvok vycentruje horizontálne v rámci nadradeného bloku.

zarovnanie textu: na stred

Táto metóda je vhodná na zarovnanie textu na stred v rámci bloku. zarovnanie textu: na stred:

pozíciu a záporný okraj vľavo

Vhodné pre centrované bloky známej šírky. Udávame polohu nadradeného bloku: relatívne k polohe vzhľadom k nemu, vycentrovaný prvok je poloha: absolútna, vľavo: 50 % a záporný okraj vľavo, ktorý sa rovná polovici šírky prvku:

zobrazenie: inline-block + text-align: center

Táto metóda je vhodná na zarovnanie blokov neznámej šírky, ale vyžaduje si nadradený obal. Týmto spôsobom môžete napríklad vycentrovať horizontálnu ponuku:

• Domov
• o autorovi

Vertikálne zarovnanie

výška riadku

Ak chcete zarovnať jeden riadok textu, môžete použiť rovnakú výšku a riadkovanie pre nadradený blok. Vhodné pre tlačidlá, položky ponuky a ďalšie.

pozíciu a zápornú maržu nahor

Prvok možno vertikálne zarovnať tak, že mu dáte pevnú výšku a použijete polohu: absolútnu a záporný okraj nahor rovný polovici výšky zarovnávaného prvku. Rodičovský blok musí mať priradenú pozíciu: relatívna:

Wrapper (pozícia: relatívna;) prvok (výška: 200px; okraj: -100px 0 0; pozícia: absolútna; hore: 50%;)

Pomocou polohovania a záporných okrajov teda môžete prvok na stránke vycentrovať.

displej: tabuľka-bunka

Pri zvislom zarovnaní sa na prvok aplikuje vlastnosť display: table-cell, vďaka čomu emuluje bunku tabuľky. Nastavíme tiež výšku a vertikálne zarovnať: stred. Toto všetko zabalíme do kontajnera s vlastnosťou dislpay: table; :

Dynamické zarovnanie prvku na stránke

Prebrali sme spôsoby zarovnania prvkov na stránke pomocou CSS. Teraz sa pozrime na implementáciu variantu jQuery.

Zahrnieme jQuery na stránku:

Navrhujem napísať jednoduchú funkciu na vycentrovanie prvku na stránke, nazvime ju alignCenter (). Samotný prvok funguje ako argument funkcie:

Funkcia alignCenter (prvok) (// kód tu)

V tele funkcie dynamicky vypočítajme a zavesme súradnice stredu stránky na vlastnosti CSS left a top:

Funkcia alignCenter (elem) (elem.css ((vľavo: ($ (okno) .width () - elem.width ()) / 2 + "px", hore: ($ (okno) .height () - elem. výška ()) / 2 + "px" // nezabudnite k prvku pridať pozíciu: absolútnu, aby sa spustili súradnice)))

V prvom riadku funkcie dostaneme šírku dokumentu a odpočítame od nej šírku prvku, rozdeleného na polovicu - to bude stred stránky horizontálne. Druhý riadok robí to isté, len s výškou pre vertikálne zarovnanie.

Funkcia je pripravená, zostáva ju zavesiť na udalosti DOM ready a window resize:

$ (funkcia () (// volanie funkcie centrovania, keď je DOM pripravený alignCenter ($ (elem)); // volanie funkcie, keď sa veľkosť okna mení $ (window) .resize (function () (alignCenter ($ ( elem));)) // funkcia na vycentrovanie prvku funkcia alignCenter (elem) (elem.css ((// vypočítajte ľavú a hornú súradnicu vľavo: ($ (window) .width () - elem.width ())) / 2 + "px", hore: ($ (okno) .height () - elem.height ()) / 2 + "px")))))

Používanie Flexboxu

Nové funkcie CSS3, ako napríklad Flexbox, sa pomaly stávajú samozrejmosťou. Táto technológia pomáha vytvárať rozloženie bez použitia plavákov, polohovania atď. Dá sa použiť aj na vycentrovanie prvkov. Použime napríklad flexbox na nadradenom obale .wrapper a vycentrujeme obsah vnútri:

Wrapper (display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; výška: 500px; šírka: 500px;) .wrapper .content (okraj: auto; / * okraj: 0 auto; iba horizontálne * / / * okraj: auto 0; iba vertikálne * /)

Toto pravidlo vycentruje prvok horizontálne aj vertikálne súčasne – okraj teraz funguje nielen pre horizontálne, ale aj pre vertikálne zarovnanie. A bez známej šírky / výšky.

Súvisiace zdroje

Pomôžte projektu