Ponuka vpravo

Veta s použitím konca

C AT E TOKomu

Na vytvorenie červenej čiary potrebujete poznať iba jeden parameter.

Je to jednoduchá vlastnosť odsadenia textu.

. 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 vám navrhujem, aby ste sa zaoberali otázkou formátovania a zarovnania blokov div v strede.

Čo je DIV

Názov prvku pochádza z anglického slova division, čo znamená rozdelenie. 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. Značka žiadnym spôsobom neovplyvňuje zobrazovanie obsahu a nenesie žiadnu sémantickú záťaž.

DIV podporuje všetky globálne atribúty. Ale na webdizajn potrebujete len dve – triedu a id. Na všetko ostatné si spomeniete len v exotických prípadoch, a to nie je pravda. Atribút align, ktorý sa používal na zarovnanie divu 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, podľa ktorých musíte triediť obsah. Ovocie nebudete dávať do jednej nádoby s pečeňou. Každý druh produktu vkladáte samostatne. Webový obsah sa generuje podobným spôsobom.

Otvorte ľubovoľnú stránku a rozdeľte ju do sémantických blokov. Hlavička hore, päta dole, hlavný text v strede. Na bočnej strane sa zvyčajne nachádza menší stĺpec s propagačným obsahom 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 svoj vlastný kontajner. Tým sa nielen oddelia prvky v toku, ale uľahčí sa aj ich formátovanie. Bude pre vás oveľa jednoduchšie vycentrovať objekt v tagu DIV tak, že mu pridelíte triedu alebo ID.

Center Zarovnať DIV s okrajmi

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

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

Tieto vlastnosti pridávajú voľný priestor medzi objekty a tiež im pomáhajú zarovnať a umiestniť podľa potreby. Napríklad, ak blok s obrázkom musí byť posunutý od ľavého okraja k stredu o 20 %, priradíte prvku ľavý okraj s hodnotou 20 %:

Block-with-img( ľavý okraj: 20 %; )

Prvky je možné formátovať aj pomocou hodnôt ich šírky a zápornej výplne. Napríklad existuje blok s rozmermi 200 x 200 pixelov. Najprv jej priraďte absolútnu pozíciu a posuňte ju do stredu o 50 %.

Div( pozícia: absolútna; vľavo: 50 %; )

Teraz, aby ste sa uistili, že je DIV dokonale vycentrovaný, dajte mu zápornú ľavú výplň rovnajúcu sa 50 % jeho šírky, t. j. -100 pixelov:

ľavý okraj: -100 pixelov

V CSS sa to nazýva „odstránenie vzduchu“. Má však značnú nevýhodu v potrebe vykonávať neustále výpočty, čo je dosť ťažké pre prvky s niekoľkými úrovňami vnorenia. Ak je nastavená výplň a šírka okraja, prehliadač štandardne vypočíta rozmery kontajnera ako súčet hrúbky okraja, výplne vpravo, vľavo a samotného obsahu, čo môže tiež prekvapiť.

Takže keď potrebujete vycentrovať DIV, použite vlastnosť box-sizing s hodnotou border-box. Prehliadaču to zabráni pridať hodnotu padding a border k celkovej šírke 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 vycentrovať blok div pomocou automatických okrajov

Toto je jednoduchý spôsob, ako vycentrovať veľké bloky. Jednoducho nastavíte šírku kontajnera a vlastnosť margin na 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 citlivých aplikácií použite metódu automatického okraja. Kľúčom je dať kontajneru hodnotu šírky v ems alebo percentách. Kód z vyššie uvedeného príkladu vycentruje DIV na akomkoľvek zariadení, vrátane Mobilné telefóny, zaberie 90 % obrazovky.

Zarovnanie cez zobrazenie vlastnosti: inline-block

V predvolenom nastavení sa prvky DIV považujú za prvky bloku a majú zobrazenú hodnotu bloku. Pre túto metódu budete musieť túto vlastnosť prepísať. Vhodné len pre DIV s nadradeným kontajnerom:

Je priradený prvok s triedou external-div vlastnosť zarovnania textu s hodnotou stredu, ktorá vycentruje text vo vnútri. Prehliadač však zatiaľ vidí vnorený DIV ako blokový objekt. Na to, aby vlastnosť text-align fungovala, musí byť inner-div považovaný za vložený. Takže v CSS pre selektor internal-div napíšete nasledujúci kód:

Inner-div( display: inline-block; )

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

transformovať/preložiť metódu

Kaskádové štýly vám umožňujú ľubovoľne presúvať, skosiť, otáčať a transformovať prvky webu. Na to sa používa vlastnosť transform. Požadovaný typ transformácie a stupeň sú špecifikované ako hodnoty. AT tento príklad budeme pracovať s prekladom:

transform: translate(50%, 50%);

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

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

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

Transform: translateY(-20%);

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

webkit-transform: translate(50%, 50%); -ms-transform: translate(50%, 50%); transform: translate(50%, 50%);

V roku 2018 to už nie je potrebné, vlastnosť podporujú všetky prehliadače vrátane Edge a IE.

Aby sme vycentrovali DIV, ktorý potrebujeme, je funkcia translate CSS napísaná s hodnotou 50 % pre vertikálnu a horizontálnu os. To spôsobí, že prehliadač presunie prvok z jeho aktuálnej pozície na polovicu jeho šírky a výšky. Vlastnosti šírky a výšky musia byť špecifikované:

Majte na pamäti, že prvok, na ktorý je aplikovaná vlastnosť transform, sa pohybuje bez ohľadu na objekty, ktoré ho obklopujú. Na jednej strane je to pohodlné, ale niekedy môže pohyblivý DIV prekrývať iný kontajner. Preto je tento spôsob centrovania komponentov siete považovaný za neštandardný a používa sa len v prípadoch krajnej potreby. Na animáciu sa používajú transformácie podľa všetkých kánonov CSS.

Práca s rozložením Flexbox

Do úvahy prichádza Flexbox komplikovaným spôsobom rozloženie webu. Ale ak to zvládnete, pochopíte, že je to oveľa jednoduchšie a príjemnejšie ako štandardnými spôsobmi formátovanie. Špecifikácia Flexbox je flexibilný a neuveriteľne výkonný spôsob manipulácie s prvkami. OD anglického jazyka Názov modulu je preložený ako „flexibilný kontajner“. Hodnoty šírky, výšky, usporiadania 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 block (block) a inline (inline-block) hodnoty. 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 objekty v ňom vnorené, ale iba priame deti, budú flexibilné položky:

Ak je zoznam umiestnený vo flexibilnom kontajneri, položky v zozname li sa nepovažujú za flexibilné položky. Rozloženie Flexbox bude fungovať iba na ul:

Pravidlá umiestňovania flexibilných predmetov

Ak chcete spravovať flexibilné položky, potrebujete zarovnať obsah a zarovnať položky. V závislosti od 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:

Ak chcete vycentrovať text na DIV, ktoré sú flexibilnými položkami, môžete použiť štandardný trik na zarovnanie textu. Alebo môžete z každého vnoreného DIV urobiť flexibilný kontajner a spravovať obsah 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.

Je možné zarovnať prvky horizontálne a vertikálne rôzne cesty. Výber metódy závisí od typu prvku (blok alebo inline), od typu jeho umiestnenia, veľkosti atď.

1. Horizontálne zarovnanie na stred bloku / strany

1.1. Ak má blok šírku:

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

Ak chcete týmto spôsobom zarovnať vložený prvok, musíte ho nastaviť na zobrazenie: blok;

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

.wrapper(text-align:center;)

1.3. Ak má blok šírku a je potrebné ho upevniť v strede nadradeného bloku:

.wrapper (pozícia: relatívna; /*nastaví rodičovský rámček na relatívnu pozíciu, aby sme v ňom mohli neskôr úplne umiestniť rámček*/) .box (šírka: 400px; pozícia: absolútna; vľavo: 50%; margin-left: - 200px; / *posunie blok doľava o vzdialenosť rovnajúcu sa polovici jeho šírky*/ )

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

.wrapper (text-align: center; /*vycentrovať obsah bloku*/) odsadenie medzi blokmi*/ )

2. Vertikálne zarovnanie

2.1. Ak text zaberá 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 vo vnútri 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 ( display: table; width: 100%; ) .box ( display: table-cell; height: 100px; text-align: center; vertical-align: middle; )

2.4. Ak má rámček nastavenú šírku a výšku a je potrebné ho vycentrovať na rodičovský rámček:

.wrapper ( pozícia: relatívna; ) .box ( výška: 100px; šírka: 100px; pozícia: absolútna; hore: 0; vpravo: 0; dole: 0; vľavo: 0; okraj: auto; pretečenie: auto; /*do obsah sa nerozšíril */ )

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

ak má prvok rozmery

div ( šírka: 300px; /*nastaviť šírku bloku*/ výšku:100px; /*nastaviť výšku bloku*/ transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50% ;)

ak prvok nemá žiadne rozmery a nie je prázdny

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

Zdalo by sa, že nie je nič zložité nastaviť obrázok alebo text do stredu okna prehliadača. Používame značku CENTER a všetko zapadá na miesto, kde sme to zamýšľali. Nie všetko je však také jednoduché. Existujú tri spôsoby zarovnania na stred, z ktorých každý má svoje vlastné charakteristiky a rozdiely v rôznych prehliadačoch.

Jedna z najjednoduchších a najpohodlnejších značiek - CENTER je určená na zarovnanie bloku textu. Tento štítok možno použiť aj na vycentrovanie obrázkov a tabuliek. Výnimkou sú prvky alebo pre ktoré je zarovnanie nastavené vlastnosťami IMG tagu. Ak teda umiestnime prvok vnútri značky CENTER bude obrázok zarovnaný doprava.

Príklad 4.1. Centrovanie pomocou značky CENTER

Tento text bude zarovnaný do stredu okna prehliadača a pod ním
kresba na pravej strane.

Formálne by sa CENTER mal používať iba ako parameter pre iné značky bloku (P, PRE a iné). V prehliadači Netscape Navigator 2.0 bol však CENTER predstavený ako samostatný tag. Toto pridanie bolo určené na odstránenie nadbytočných zvislých výplní, ktoré sa objavujú pri používaní blokových značiek. Ak sa namiesto značky CENTER text umiestni do odseku (

) , medzi nimi je ďalšia zvislá zarážka horizontálna čiara a tento text.

CENTER nie je súčasťou špecifikácie HTML. V "oficiálnom" HTML formátovanie, napríklad zarovnanie textu by sa malo vykonávať prostredníctvom atribútov značiek (napr.

) alebo pomocou štýlov. Napriek tomu táto značka získala právo na existenciu. Od vydania špecifikácie HTML 4 W3 však konzorcium odporúča vyhnúť sa používaniu značky CENTER a že prvok

, ako je uvedené v príklade 4.2.

Príklad 4.2. Centrovanie pomocou značky DIV

---

Ďalším spôsobom centrovania je použitie štýlov. Štýly sú pokyny, ktoré vám umožňujú ovládať atribúty formátovania, ako je font, farba, zarovnanie atď. Príklad predefinovania značky P na stred textu.

Príklad 4.3. Centrovanie pomocou štýlov

Teraz, keď použijete značku P s vyššie uvedeným
štýl, text odseku bude zarovnaný na stred okna prehliadača

Stredové prvky vertikálne s pomocou CSS je úloha, ktorá predstavuje pre vývojárov určité ťažkosti. Na jeho vyriešenie však existuje niekoľko metód, ktoré sú celkom jednoduché. Táto lekcia predstavuje 6 možností vertikálneho centrovania obsahu.

Začnime s všeobecný popisúlohy.

Problém vertikálneho centrovania

Horizontálne centrovanie je veľmi jednoduché a ľahké. Keď je prvok, ktorý je vycentrovaný, vložený, použite vlastnosť relatívneho zarovnania nadradený prvok. Keď je prvkom blokový prvok, nastavíme jeho šírku a automatická inštaláciaľavý a pravý okraj.

Väčšina ľudí, keď používa vlastnosť text-align:, odkazuje na vlastnosť vertical-align pre vertikálne centrovanie. Všetko vyzerá celkom logicky. Ak ste používali šablóny tabuliek, pravdepodobne ste vo veľkej miere používali atribút valign, ktorý posilňuje presvedčenie, že vertikálne zarovnanie je správna cesta.

Ale atribút valign funguje iba na bunkách tabuľky. A vlastnosť vertical-align je veľmi podobná. Ovplyvňuje aj bunky tabuľky a niektoré vložené prvky.

Hodnota vlastnosti vertical-align je relatívna k rodičovskému inline prvku.

• V riadku textu je zarovnanie relatívne k výške riadku.
• Bunka tabuľky používa zarovnanie vzhľadom na hodnotu vypočítanú špeciálnym algoritmom (zvyčajne sa získa výška riadku).

Ale bohužiaľ, vlastnosť vertical-align nefunguje na prvkoch na úrovni bloku (ako sú odseky v prvku div). Táto situácia môže viesť k myšlienke, že problém vertikálneho zarovnania neexistuje.

Existujú však aj iné metódy centrovania prvkov na úrovni bloku, ktorých výber závisí od toho, čo sa centruje vo vzťahu k vonkajšiemu kontajneru.

metóda výšky čiary

Táto metóda funguje, keď chcete vertikálne vycentrovať jeden riadok textu. Jediné, čo musíte urobiť, je nastaviť výšku riadku tak, aby bola väčšia ako veľkosť písma.

V predvolenom nastavení bude voľné miesto rozložené rovnomerne nad a pod textom. A čiara bude vertikálne vycentrovaná. Výška čiary sa často rovná výške prvku.

HTML:

CSS:

#child ( výška riadku: 200px; )

Táto metóda funguje vo všetkých prehliadačoch, aj keď ju možno použiť iba pre jeden riadok. Hodnota 200 px v príklade je zvolená ľubovoľne. Môžete použiť akúkoľvek hodnotu väčšiu ako je veľkosť písma textu.

Vycentrovanie obrázka s výškou čiary

Čo ak je obsahom obrázok? Bude vyššie uvedená metóda fungovať? Odpoveď spočíva v inom riadku kódu CSS.

HTML:

CSS:

#parent ( line-height: 200px; ) #parent img ( vertical-align: middle; )

Hodnota vlastnosti line-height musí byť väčšia ako výška obrázka.

Metóda tabuľky CSS

Ako už bolo spomenuté vyššie, vlastnosť vertical-align sa vzťahuje na bunky tabuľky, kde funguje skvele. Náš prvok môžeme vykresliť ako bunku tabuľky a použiť na nej vlastnosť vertical-align na vertikálne vycentrovanie obsahu.

Poznámka: CSS tabuľka nie je to isté ako HTML tabuľka.

HTML:

CSS:

#parent (zobrazenie: tabuľka;) #podriadené (zobrazenie: bunka tabuľky; zvislé zarovnanie: stred; )

Nastavíme výstup tabuľky na rodičovský div a vykreslíme vnorený div ako bunku tabuľky. Teraz môžete použiť vlastnosť vertical-align na vnútornom kontajneri. Všetko v ňom bude vertikálne vycentrované.

Na rozdiel od vyššie uvedenej metódy môže byť v tomto prípade obsah dynamický, pretože veľkosť prvku div sa prispôsobí jeho obsahu.

Nevýhodou tejto metódy je, že nefunguje v starších verziách IE. Pre vnorený kontajner musíte použiť vlastnosť display: inline-block.

Absolútne umiestnenie a záporné marže

Táto metóda funguje aj vo všetkých prehliadačoch. Vyžaduje si to však, aby centrovanému prvku bola pridelená výška.

Vzorový kód vykonáva horizontálne aj vertikálne centrovanie súčasne:

HTML:

CSS:

#rodič (pozícia: relatívna;) #dieťa ( pozícia: absolútna; hore: 50 %; vľavo: 50 %; výška: 30 %; šírka: 50 %; okraj: -15 % 0 0 -25 %; )

Najprv nastavíme typ umiestnenia prvkov. Potom na vnorenom prvku div nastavte vlastnosti top a left na 50 %, čo je stred nadradeného prvku. Ale center trafil ľavú stranu horný roh vnorený prvok. Preto ho musíte zdvihnúť (polovica výšky) a posunúť doľava (polovica šírky) a potom sa stred zhoduje so stredom nadradeného prvku. Takže poznať výšku prvku je v tomto prípade nevyhnutné. Potom dáme prvku záporný horný a ľavý okraj rovný polovici výšky a šírky.

Táto metóda nefunguje vo všetkých prehliadačoch.

Absolútne polohovanie a strečing

Príklad kódu vykonáva vertikálne a horizontálne centrovanie.

HTML:

CSS:

#rodič (pozícia: relatívna;) #dieťa ( pozícia: absolútna; hore: 0; dole: 0; vľavo: 0; vpravo: 0; šírka: 50 %; výška: 30 %; okraj: auto; )

Myšlienkou tejto metódy je roztiahnuť vnorený prvok na všetky 4 hranice nadradeného prvku nastavením vlastností top, bottom, right a left na 0.

Výsledkom nastavenia automatického vytvárania okrajov na všetkých stranách bude úloha rovnaké hodnoty na všetkých 4 stranách a prenesie náš vnorený prvok div do stredu nadradeného prvku.

Bohužiaľ, táto metóda nefunguje v IE7 a nižšie.

Rovnaké polstrovanie hore a dole

Táto metóda explicitne nastavuje rovnakú výplň nad a pod nadradeným prvkom.

HTML:

CSS:

#rodič (výplň: 5 % 0; ) #dieťa ( výplň: 10 % 0; )

V kóde Príklad CSS horný a dolný okraj je nastavený pre oba prvky. Pre vnorený prvok bude nastavenie výplne slúžiť na jeho vertikálne vycentrovanie. A výplň nadradeného prvku vycentruje vnorený prvok v ňom.

Relatívne jednotky sa používajú na dynamickú zmenu veľkosti prvkov. A pre absolútne jednotky merania budete musieť urobiť výpočty.

Napríklad, ak je nadradený prvok vysoký 400 pixelov a vnorený prvok je vysoký 100 pixelov, potom sa vyžaduje 150 pixelov odsadenia v hornej a dolnej časti.

150 + 150 + 100 = 400

Použitie % umožňuje ponechať výpočty na prehliadači.

Táto metóda funguje všade. Nevýhodou je nutnosť výpočtov.

Poznámka: Táto metóda funguje nastavením okraja prvku. Okraje môžete použiť aj v rámci prvku. Rozhodnutie použiť okraje alebo výplň by sa malo urobiť v závislosti od špecifík projektu.

plávajúca div

Táto metóda používa prázdny prvok div, ktorý sa vznáša a pomáha kontrolovať polohu nášho vnoreného prvku v dokumente. Všimnite si, že plávajúci prvok div je umiestnený pred naším vnoreným prvkom v kóde HTML.

HTML:

CSS:

#parent (výška: 250px;) #floater ( float: left; height: 50%; width: 100%; margin-bottom: -50px; ) #child (clear: both; height: 100px; )

Prázdny prvok div odsadíme doľava alebo doprava a dáme mu výšku 50 % nadradeného prvku. Týmto spôsobom vyplní hornú polovicu nadradeného prvku.

Keďže tento prvok div je plávajúci, je odstránený z normálneho toku dokumentu a musíme rozvinúť vnorený prvok. V príklade je použité clear: both , ale stačí použiť rovnaký smer ako odsadenie plávajúceho prázdneho prvku div.

Horný okraj vnoreného prvku div je priamo pod spodným okrajom prázdneho prvku div. Musíme posunúť vnorený prvok nahor o polovicu výšky plávajúceho prázdneho prvku. Na vyriešenie problému sa používa záporná hodnota vlastnosti margin-bottom pre plávajúci prázdny prvok div.

Táto metóda funguje aj vo všetkých prehliadačoch. Jeho použitie však vyžaduje ďalší prázdny prvok div a znalosť výšky vnoreného prvku.

Záver

Všetky opísané metódy sa ľahko používajú. Problém spočíva v tom, že žiadny z nich nie je vhodný pre všetky prípady. Je potrebné analyzovať projekt a vybrať ten, ktorý najlepšie vyhovuje požiadavkám.