Č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 – class a id. Na všetkých ostatných si spomeniete len v exotických prípadoch, a to nie je pravda. Atribút zarovnania, ktorý sa používal na zarovnanie divov na stred alebo doľava, bol 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 by ste nedali do jednej nádoby s pečeňou. Každý druh produktu umiestnite samostatne. Webový obsah sa generuje podobným spôsobom.

Otvorte ľubovoľnú webovú stránku a rozdeľte ju do zmysluplných blokov. Hlavička hore, päta dole, hlavný text v strede. Na bočnej strane je zvyčajne menší stĺpec s reklamným obsahom alebo tag cloud.

Teraz sa pozrite na každú časť podrobnejšie. Začnite hlavičkou. Hlavička stránky má samostatné logo, navigáciu, nadpis prvej úrovne a niekedy aj slogan. Priraďte každému sémantickému bloku vlastný kontajner. To nielenže oddelí prvky v toku, ale tiež uľahčí ich formátovanie. Zistíte, že je oveľa jednoduchšie vycentrovať objekt v tagu DIV tak, že mu priradíte triedu alebo ID.

Centrovanie prvkov DIV pomocou okrajov

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. Hranica sú čiary pozdĺž blokov. Môžu byť priradené všetkým naraz alebo iba jednej strane:

Tieto vlastnosti pridávajú priestor medzi objektmi a pomáhajú vám ich správne zarovnať a umiestniť. Ak je napríklad potrebné posunúť blok s obrázkom z ľavého okraja do stredu o 20 %, priradíte prvku hodnotu okraja vľavo 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 mu priraďme absolútnu pozíciu a posuňme ho do stredu o 50 %.

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

Teraz, aby sme zaistili, že je vycentrovaný DIV umiestnený perfektne, dáme mu doľava záporný okraj rovnajúci sa 50 % jeho šírky, teda -100 pixelov:

Ľavý okraj: -100px;

V CSS sa to nazýva „odstránenie vzduchu“. 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 sú zadané hodnoty výplne a šírky okraja, prehliadač štandardne vypočíta rozmery kontajnera ako súčet hrúbky okrajov, výplne vpravo a vľavo a samotného obsahu vo vnútri, čo môže prísť aj ako prekvapenie.

Takže keď potrebujete vycentrovať DIV, použite vlastnosť box-sizing s hodnotou border-box. To zabráni prehliadaču pridávať hodnoty odsadenia a okraja 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. Šírku kontajnera a vlastnosť margin jednoducho priradíte na auto. Prehliadač umiestni do stredu blok s rovnakými okrajmi vľavo a vpravo a 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 poľa. Hlavná vec je priradiť hodnotu šírky kontajneru v em alebo percentách. Kód vo vyššie uvedenom príklade vycentruje DIV a na akomkoľvek zariadení vrátane mobilných telefónov bude zaberať 90 % obrazovky.

Zarovnanie pomocou vlastnosti zobrazenia: inline-block

V predvolenom nastavení sa prvky DIV považujú za prvky bloku a ich zobrazovaná hodnota je blok. 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ť text-align 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í sa s inner-div zaobchádzať ako s malými písmenami. Takže do tabuľky 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 umožňujú ľubovoľne presúvať, skosiť, otáčať a inak transformovať prvky webu. Používa sa na to vlastnosť transform. Hodnoty označujú požadovaný typ a stupeň transformácie. V tomto príklade budeme pracovať s prekladom:

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ť uveďte názov osi a v zátvorkách veľkosť požadovaného posunutia:

Transform: translateY(-20%);

V niektorých príručkách môžete nájsť 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 sa požadovaný DIV vycentroval, funkcia prekladu 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 objektov, ktoré ho obklopujú. Na jednej strane je to pohodlné, no niekedy pohybom 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 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

Flexbox sa považuje za sofistikovaný spôsob navrhovania webových rozložení. Ale ak si to osvojíte, zistí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 a 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 hodnoty block a inline-block. Na vytvorenie flexibilných rozložení použijeme display: flex. Najprv potrebujeme flex kontajner:

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ými prvkami:

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

Pravidlá umiestňovania ohybných prvkov

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 sám:

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

CSS – Rozloženie a zarovnanie stránok na stred

Naša stránka pozostáva zo štyroch blokov: hlavička, menu, obsah a päta. Aby sme stránku vycentrovali, umiestnime tieto štyri bloky do jedného hlavného bloku:

Hlavička stránky

Obsah

Spodná časť stránky

Ak použijeme túto štruktúru ako príklad, zvážime niekoľko možností.

Rozloženie a centrovanie gumeného miesta

Pri položení gumeného miesta je hlavnou meracou jednotkou -%, pretože miesto by sa malo tiahnuť po šírke a zaberať celý voľný priestor.

Preto bude šírka blokov „hlavička“ a „päta“ 100 % šírky obrazovky. Nech je šírka bloku "menu" 30% a blok "obsah" by sa mal nachádzať vedľa bloku "menu", t.j. musí mať ľavý okraj (margin-left) so šírkou rovnajúcou sa šírke bloku "menu", t.j. tridsať percent.

Aby bloky „menu“ a „obsah“ sedeli vedľa seba, urobme blok „menu“ plávajúcim a zatlačte ho na ľavý okraj. Nastavíme tiež farby pozadia pre naše bloky. Teraz to všetko napíšme do šablóny štýlov (na stránke style.css)

#header( background:#3e4982; width:100%; height:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( background:#6173cb; float :left; width:30%; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:30% ; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:100%; height:50px; text-align:center; color:#FFFFFF; font-size:14px; padding-top: 10px ;)

Výška blokov bola nastavená podmienečne tak, aby bol výsledok viditeľný. Pozrite si našu stránku vo svojom prehliadači:

Ak zmeníte veľkosť okna prehliadača, zmení sa šírka všetkých blokov. To nie je vždy výhodné, pretože... Keď je blok ponuky roztiahnutý, objaví sa prázdne miesto. Preto je šírka bloku „menu“ často pevná, takže urobme to isté. Ak to chcete urobiť, nahraďte hodnoty zodpovedajúcich vlastností v šablóne štýlov:

... #menu( pozadie:#6173cb; float:left; width:200px; height:300px; ) #content( background:#ffffff; margin-left:200px; height:300px; ) ...

Teraz sa naša stránka rozťahuje prirodzenejšie. Pri plynulom rozložení strany zaberajú celú šírku obrazovky, takže zarovnávanie strán nie je potrebné.

Ak však chcete, môžete na svojej stránke nastaviť rovnakú výplň na ľavej a pravej strane obrazovky. Ak to chcete urobiť, musíte pridať štýl do „hlavného“ bloku, ktorý je kontajnerom pre všetky ostatné bloky:

Naša stránka teraz vyzerá takto:

Rozloženie a centrovanie miesta, pevná šírka

V tomto prípade budeme musieť pre naše bloky nastaviť pevné veľkosti:

#main( width:800px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu ( pozadie:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:800px; height:50px; text-align:center; color:#FFFFFF; font- size:14px; padding-top:10px; )

Teraz je naša stránka pritlačená k ľavému okraju obrazovky.

V tomto prípade je možné zarovnanie stránok na stred vykonať nasledovne. Pripomeňme si, že naša stránka má štítok „body“, ktorý môže mať aj šírku a výplň.

Urobme toto: značke „body“ dajte šírku 800 pixelov (ako „hlavný“ blok) a ľavú výplň 50 %. Potom sa celý obsah „hlavného“ bloku zobrazí na pravej strane obrazovky (t. j. od stredu doprava):

Aby bol náš „hlavný“ blok umiestnený v strede obrazovky, jeho stred sa musí zhodovať so stredom značky „body“. Tie. musíte posunúť „hlavný“ blok doľava o polovicu jeho veľkosti. Šírka „hlavného“ bloku je 800 pixelov, čo znamená, že mu musíte nastaviť vlastnosť „margin-left:-400px“. Áno, táto vlastnosť môže nadobúdať záporné hodnoty, potom sa ľavý okraj zmenší (t. j. posunie sa doľava). A to je presne to, čo potrebujeme.

Šablóna štýlov teraz vyzerá takto:

body( width:800px; padding-left:50%; ) #main( width:800px; margin-left:-400px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center ; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:800px; height:50px; text-align:center; color:#FFFFFF; font-size:14px; padding-top:10px; )

A naša stránka v prehliadači sa nachádza presne v strede:

Pozreli sme sa na dve možnosti centrovania stránok lokality; v skutočnosti to nie sú dogmy. Môžete experimentovať a prísť s vlastnou verziou, stačí skontrolovať, ako to funguje v rôznych prehliadačoch. Bohužiaľ to, čo sa dobre zobrazuje vo FireFoxe alebo Opere, sa môže v IE zobrazovať úplne nezrozumiteľne a naopak. A toto si musíme pamätať.

Veľa šťastia vo vašom kreatívnom hľadaní!



Ak vám táto stránka pomohla, pozrite sa na naše ďalšie

Analyzujeme zarovnanie prvkov bloku v CCS. Niekoľko ich umiestnime do stredu DIV alebo LI prvkov. Pre väčšinu prípadov ponúkam niekoľko svojich možností.

Tento článok si nekladie za cieľ vymenovať všetky možnosti zarovnania a prepísať to, čo už niekde existuje. Nepamätám si prečo, ale často som nebol spokojný s ponúkanými možnosťami. Buď tam boli pevné bloky, alebo sa všetko rozpadlo pri adaptívnom rozložení, prípadne nejaké iné nedostatky.

Niekedy na zarovnanie na stred stačí pridať pár atribútov a nepotrebujete nič zložité. Napríklad aj ja.

Nižšie je uvedených niekoľko možností adaptívneho rozloženia na zarovnanie blokov v strede, ktoré I používam na ich webových stránkach. A ak je ten prvý celkom bežný, tak možno niektoré ďalšie spôsoby ani nebudú na internete popísané presne takto.

možnosť 1

Jednoduché zarovnanie všetkých blokov na stred stránky.

Poďme na stred UL obsah zo 4 prvkov LI, ktoré sú v bloku DIV s triedou kontajner.

V tomto prípade postačujú nasledujúce pravidlá v CSS:

Kontajner (
šírka: 100 %;
}

Kontajner ul (
text-align: center;
štýl zoznamu: žiadny;
}

Kontajner li (
displej: inline-block;
}

Získame nasledujúci pohľad: Tu sú vycentrované 4 prvky LI. Keď sa veľkosť obrazovky zmenší, prvky, ktoré sa nezmestia, sa presunú nadol.

Ak bloky LI s týmito nehnuteľnosťami nie sú inštalované v strede, čo znamená, že do nich zasahuje nejaký iný majetok. Môže to byť napríklad nehnuteľnosť plavák: vľavo alebo displej: tabuľka; alebo nejaký iný.

Teraz môžete pridať ďalšie štýly do hornej štruktúry (do základného rámca zarovnania CSS). Napríklad vytvorte bloky pevnej veľkosti a odsadzujte ich navzájom:

Kontajner li (
displej: inline-block;
okraj: 5px;
šírka: 100px;
}

Získame nasledovné:

Ale táto možnosť má jednu nevýhodu. Bloky sa nachádzajú v strede, ale vľavo a vpravo sú obrovské vzdialenosti. Dajú sa zmenšiť zmenou šírky.

Alebo môžete vytvoriť nádoby rovnakej veľkosti, takže priehlbiny budú iba medzi nádobami a na ľavej a pravej strane nebudú žiadne.

Potom odstránime marža a pridajte túto šírku šírka tak, aby úplne pokrýval oblasť.

Kontajner li (
vertikálne zarovnať: hore;
displej: inline-block;
šírka: 32,899 %;
}

Medzi blokmi bude malá oblasť prázdneho priestoru. A aby to bolo ešte väčšie, pomocou parametra sa môžete stiahnuť dovnútra vypchávka.

V blokoch schválne nepridávam nič navyše, aby som ponechal presne tie štýly, ktoré priamo ovplyvňujú zarovnanie. Ale ak urobíte to isté, nezískate takéto bloky. Ak len preto, po prvé, musíte do bloku pridať farbu a po druhé, ak je prázdny, vložte výška: 100px;. Ostatné atribúty sú podľa vášho želania.

Finálna verzia je:

Na snímke obrazovky vyššie som nechal ostatné oblasti webu, aby bolo jasné, kde sú hranice blokov, pretože ak susedia s okrajom, potom už nie je viditeľný samotný okraj. A na obrázku sú biele okraje vľavo a vpravo iné zarovnanie, ktoré nemá nič spoločné s príslušným príkladom. Opakujem, samotné bloky susedia s okrajmi, ktoré nie sú viditeľné, pretože bloky ich úplne zakrývajú.

Možnosť 2

Existuje mnoho spôsobov, ako vycentrovať bloky. Ale ak potrebujete urobiť zarovnanie inteligentnejšie, musíte si polámať hlavu. Našťastie som prišiel so zaujímavou metódou na nasledujúce účely:

Ako vycentrujem všetky divy, aby bol blok na ďalšom riadku zarovnaný doľava?

Máme nasledujúcu štruktúru:

Píšeme pre nich triedy:

šírka: 90 %;
okraj: 0 auto;
}

Archív-článok (
displej: inline-block;
vertikálne zarovnať: hore;

Šírka: calc(33,3333% - (0,666666666667 * 36px));
okraj: 0 10px 0 11px;
}

Upozorňujeme, že ak zmeníte veľkosť calc, potom je potrebné experimentálne upraviť rozmery marža. V opačnom prípade nebudú bloky vycentrované.

Toto zarovnanie sa musí vykonať okom. Ale ak je na novom riadku menej blokov ako na riadku vyššie, tento osamelý blok bude s ľavá strana. A vyzerá to oveľa krajšie, ako keď sa na ďalšom riadku nachádza jeden jediný blok v strede.

Použitím vyššie uvedenej techniky získame adaptívne rozloženie so všetkými okrajmi rovnakými, ktoré sa nezhorší pri zmene veľkosti obrazovky.

A ak chceme, aby mobilná verzia nemala 3 bloky, ale 2, tak v ccs pre rozlíšenie 768 pixelov rozdelíme bloky inak:

@media obrazovka a (maximálna šírka: 768 pixelov) (
.archive-article (
šírka: calc(47,3333 % - (0,666666666667 * 25px));
okraj: 0 10px 0 20px;
}
}

Dostaňme rovnaké bloky v mobilnej verzii, ale s dvoma blokmi na riadok:

Možnosť 3

Teraz zarovnáme pomocou flex. Môže sa to zdať ako ideálny spôsob levelovania, pretože to v skutočnosti funguje veľmi jednoducho. FLEX však nezvláda úlohu opísanú v možnosti 2. Prinajmenšom som nebol schopný dosiahnuť rovnaké výsledky.

Do ďalšej sekcie:

Pridanie štýlov:

#cssmenu (
okraj: 20px automaticky;
}

#cssmenu ul (
štýl zoznamu: žiadny;
displej: flex;
flex-wrap: zábal;
zdôvodniť-obsah: stred;
}

#cssmenu > ul > li (
okraj: 1px;
}

Dostaneme:

V uvedenom príklade:

flex-wrap: zábal;

Presunie bloky na ďalší riadok, ak plnia kontajner. V opačnom prípade sa dostanú ďalej mimo okna prehliadača.

zdôvodniť-obsah: stred;

Obsah blokov zarovnáme na stred.

Možnosť 4

Ďalšia možnosť zarovnania pomocou technológie flex.

Vo vnútri máme kontajner s dvoma blokmi. Tieto 2 bloky potrebujeme na rozdelenie šírky na dve rovnaké strany.

Za týmto účelom napíšeme do štýlov nasledujúce vlastnosti:

Kontajner (
displej: flex;
}

Blokovať (
ohybnosť: 100 %;
}

Možnosť 5

Existuje ďalšia možnosť centrovania blokov, ak je ich počet presne rovnaký. Napríklad: existuje 9 blokov, 3 pre každý riadok. A viete, že to tak vždy zostane. Napríklad vytvárate vstupnú stránku a určite viete, že medzi tieto bloky na stránku nepribudne nič zbytočné.

Máme teda 9 blokov nasledujúceho typu (riadky som neduplikoval 9-krát, ale majte na pamäti, že existuje 9 blokov):

Použite na ne štýly:

Archive-container-for-articles (
šírka: 100 %;
text-align: center;
}

Archív-článok (
šírka: 25 %;
vertikálne zarovnať: hore;
displej: inline-block;
zarovnanie textu: doľava;
}

Archive-article:n-th-child(1),
.archive-article:nth-child(4),
.archive-article:nth-child(7) (
okraj: 20px 0 30px 40px;
}

Archive-article:n-th-child(2),
.archive-article:nth-child(5),
.archive-article:nth-child(8) (
okraj: 20px 40px 30px;
}

Archive-article:n-th-child(3),
.archive-article:nth-child(6),
.archive-article:nth-child(9) (
okraj: 20px 40px 30px 0;
}

Dostaneme aj adaptívne rozloženie. Keď sa obrazovka zmenší, blok, ktorý sa nezmestí, sa presunie do stredu dole

Výhodou tohto typu centrovania je, že medzi blokmi môžete zreteľne a zreteľne robiť zárezy.

Hlavnou nevýhodou je, že do blokov nemožno umiestniť nič. Akýkoľvek prvok:

buď div alebo p alebo niečo iné, sa bude považovať za vnútorný prvok n-té dieťa. Výsledkom bude, že štýly CSS sa naň prekryjú a všetky zarážky vytvorené pomocou okraja posunú bloky inak, ako bolo pôvodne zamýšľané.

V CSS sa niektoré zdanlivo jednoduché veci nerobia tak ľahko. Jednou z týchto vecí je zarovnanie, t.j. keď je potrebné umiestniť jeden prvok určitým spôsobom vzhľadom na druhý.

Tento článok predstavuje niekoľko hotových riešení, ktoré pomôžu zjednodušiť prácu centrovacích prvkov horizontálne a / alebo vertikálne.

Poznámka: Pod každým riešením je zoznam prehliadačov s uvedením verzií, v ktorých funguje špecifikovaný kód CSS.

CSS – Center Align Block

1. Zarovnanie jedného bloku na stred druhého bloku. V tomto prípade majú prvý a druhý blok dynamické veľkosti.

Rodič ( pozícia: relatívna; ) .child ( pozícia: absolútna; vľavo: 50 %; hore: 50 %; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50% , -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%) ;)

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

2. Zarovnanie jedného bloku na stred druhého. V tomto prípade má druhý blok pevné rozmery.

Rodič ( pozícia: relatívna; ) .child ( pozícia: absolútna; vľavo: 50 %; hore: 50 %; /* šírka a výška 2 blokov */ šírka: 500px; výška: 250px; /* Hodnoty sa určujú v závislosti na jeho veľkosti */ /* ľavý okraj = - šírka / 2 */ ľavý okraj: -250 pixelov; /* horný okraj = - výška / 2 */ horný okraj: -125 pixelov; )

Prehliadače, ktoré podporujú toto riešenie:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

3. Zarovnanie jedného bloku na stred druhého bloku. V tomto prípade má druhý blok rozmery špecifikované v percentách.

Rodič ( pozícia: relatívna; ) .child ( pozícia: absolútna; /* šírka a výška 2 blokov v % */ výška: 50 %; šírka: 50 %; /* Hodnoty sú určené v závislosti od jej veľkosti v % * / vľavo: 25 %; /* (100 % - šírka) / 2 */ hore: 25 %; /* (100 % - výška) / 2 */ )

Prehliadače, ktoré podporujú toto riešenie:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

CSS - Horizontálne zarovnanie

1. Horizontálne zarovnanie jedného prvku bloku (zobrazenie: blok) voči druhému (v ktorom sa nachádza):

Blokovať ( ľavý okraj: auto; pravý okraj: auto; )

Prehliadače, ktoré podporujú toto riešenie:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Horizontálne zarovnanie riadkového (zobrazenie: inline) alebo riadkového bloku (zobrazenie: inline-block):

Parent ( text-align: center; ) .child ( display: inline-block; )

Prehliadače, ktoré podporujú toto riešenie:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

CSS - Vertical Alignment

1. Vycentrujte jeden prvok (zobrazenie: inline, display: inline-block) vzhľadom na druhý (v ktorom sa nachádza) v strede. Rodičovský blok v tomto príklade má pevnú výšku, ktorá sa nastavuje pomocou vlastnosti CSS line-height.

Parent ( line-height: 500px; ) .child ( display: inline-block; vertical-align: middle; )

Prehliadače, ktoré podporujú toto riešenie:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Vertikálne vycentrovanie jedného bloku voči druhému reprezentovaním rodiča ako tabuľky a potomka ako bunky tejto tabuľky.

Parent ( display: table; ) .child ( display: table-cell; vertical-align: middle; )

Prehliadače, ktoré podporujú toto riešenie:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

Ak poznáte nejaké ďalšie zaujímavé triky alebo užitočné hotové riešenia zarovnania, podeľte sa o ne v komentároch.

Dobrý deň, predplatitelia a čitatelia tejto publikácie. Dnes chcem ísť do detailov a povedať vám, ako vycentrovať text v CSS. V niektorých predchádzajúcich článkoch som sa tejto témy nepriamo dotkol, takže nejaké znalosti v tejto oblasti máte.

V tejto publikácii vám však poviem o všetkých rôznych spôsoboch zarovnania objektov a tiež vysvetlím, ako odsadzovať a redlineovať odseky. Začnime sa teda učiť materiál!

HTML a jeho potomkovia a zarovnať

Táto metóda sa takmer nikdy nepoužíva, pretože ju nahradili nástroje kaskádových štýlov. Vedieť, že takáto značka existuje, vám však neublíži.

Čo sa týka validácie (tento pojem je podrobne popísaný v článku „“), samotná html špecifikácia odsudzuje použitie < centrum>, keďže pre platnosť je potrebné použiť prechod DOCTYPE>.