CSS centrování bloků DIV: horizontální a vertikální. Zarovnejte blok na střed stránky

Vertikální centrování prvků pomocí CSS je pro vývojáře výzvou. Existuje však několik metod, jak to vyřešit, které jsou docela jednoduché. Tato lekce představuje 6 možností pro vertikální centrování obsahu.

Začněme obecným popisem problému.

Problém s vertikálním centrováním

Horizontální centrování je velmi jednoduché a snadné. Když je vycentrovaný prvek vložený, použijte vlastnost zarovnání vzhledem k rodičovskému prvku. Když je prvek blokový - nastavte jeho šířku a automaticky nastavte levý a pravý okraj.

Většina lidí při použití vlastnosti text-align: odkazuje na vlastnost vertical-align pro vertikální centrování. Vše vypadá celkem logicky. Pokud jste používali šablony tabulek, pravděpodobně jste hojně používali atribut valign, což posiluje přesvědčení, že vertikální zarovnání je tou správnou cestou.

Ale atribut valign funguje pouze na buňkách tabulky. A vlastnost vertical-align je velmi podobná. Ovlivňuje také buňky tabulky a některé vložené prvky.

Hodnota vlastnosti vertical-align je relativní k rodičovskému vloženému prvku.

• V řádku textu je zarovnání relativní k výšce řádku.
• Buňka tabulky používá zarovnání s ohledem na hodnotu vypočítanou speciálním algoritmem (obvykle se získá výška řádku).

Ale bohužel vlastnost vertical-align nefunguje na prvcích na úrovni bloku (jako jsou odstavce uvnitř prvku div). Tato situace může vést k myšlence, že problém vertikálního vyrovnání neexistuje.

Existují však i jiné metody centrování prvků na úrovni bloku, jejichž výběr závisí na tom, co se centruje vzhledem k vnějšímu kontejneru.

metoda výšky čáry

Tato metoda funguje, když chcete svisle vycentrovat jeden řádek textu. Jediné, co musíte udělat, je nastavit výšku řádku tak, aby byla větší než velikost písma.

Ve výchozím nastavení bude volné místo rozmístěno rovnoměrně nad a pod textem. A čára bude svisle vycentrována. Často se výška čáry rovná výšce prvku.

HTML:

CSS:

#child ( výška řádku: 200px; )

Tato metoda funguje ve všech prohlížečích, i když ji lze použít pouze pro jeden řádek. Hodnota 200 px v příkladu je zvolena libovolně. Můžete použít libovolnou hodnotu větší, než je velikost písma textu.

Vystředění obrázku s výškou čáry

Co když je obsahem obrázek? Bude výše uvedená metoda fungovat? Odpověď spočívá v jiném řádku kódu CSS.

HTML:

CSS:

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

Hodnota vlastnosti line-height musí být větší než výška obrázku.

Metoda tabulky CSS

Jak již bylo zmíněno výše, vlastnost vertical-align se vztahuje na buňky tabulky, kde funguje skvěle. Náš prvek můžeme vykreslit jako buňku tabulky a použít na ní vlastnost vertical-align k vertikálnímu vystředění obsahu.

Poznámka: CSS tabulka není to samé jako HTML tabulka.

HTML:

CSS:

#parent (display: table;) #child ( display: table-cell; vertical-align: middle; )

Nastavíme výstup tabulky na rodičovský div a vykreslíme vnořený div jako buňku tabulky. Nyní můžete použít vlastnost vertical-align na vnitřním kontejneru. Vše v něm bude vertikálně vycentrováno.

Na rozdíl od výše uvedené metody může být v tomto případě obsah dynamický, protože velikost prvku div se přizpůsobí jeho obsahu.

Nevýhodou této metody je, že nefunguje ve starších verzích IE. Pro vnořený kontejner musíte použít vlastnost display: inline-block.

Absolutní umístění a záporné okraje

Tato metoda funguje také ve všech prohlížečích. Vyžaduje však, aby centrovanému prvku byla dána výška.

Ukázkový kód provádí horizontální i vertikální centrování současně:

HTML:

CSS:

#rodič (pozice: relativní;) #dítě ( pozice: absolutní; nahoře: 50 %; vlevo: 50 %; výška: 30 %; šířka: 50 %; okraj: -15 % 0 0 -25 %; )

Nejprve nastavíme typ umístění prvků. Poté na vnořeném prvku div nastavte vlastnosti top a left na 50 %, což je střed nadřazeného prvku. Ale levý horní roh vnořeného prvku se vycentruje. Proto jej musíte zvednout (polovina výšky) a posunout doleva (polovina šířky), a pak se střed bude shodovat se středem nadřazeného prvku. Znalost výšky prvku je tedy v tomto případě nezbytná. Potom dáme prvku záporný horní a levý okraj rovný polovině výšky a šířky.

Tato metoda nefunguje ve všech prohlížečích.

Absolutní polohování a protahování

Příklad kódu provádí vertikální a horizontální centrování.

HTML:

CSS:

#rodič (pozice: relativní;) #dítě ( pozice: absolutní; nahoře: 0; dole: 0; vlevo: 0; vpravo: 0; šířka: 50 %; výška: 30 %; okraj: auto; )

Myšlenkou této metody je roztáhnout vnořený prvek na všechny 4 okraje nadřazeného prvku nastavením vlastností top, bottom, right a left na 0.

Nastavením okrajů na všech stranách na auto se nastaví hodnoty na všech 4 stranách na stejné a náš vnořený prvek div se přenese do středu nadřazeného prvku.

Bohužel tato metoda nefunguje v IE7 a nižších.

Stejné polstrování nahoře a dole

Tato metoda explicitně nastaví stejnou výplň nad a pod nadřazeným prvkem.

HTML:

CSS:

#rodič (výplň: 5 % 0; ) #dítě (výplň: 10 % 0; )

V kódu CSS pro příklad je pro oba prvky nastaveno horní a spodní odsazení. U vnořeného prvku bude nastavení výplně sloužit k jeho vertikálnímu vystředění. A odsazení nadřazeného prvku v něm vycentruje vnořený prvek.

Relativní jednotky se používají k dynamické změně velikosti prvků. A pro absolutní jednotky měření budete muset provést výpočty.

Pokud je například nadřazený prvek vysoký 400 pixelů a vnořený prvek je vysoký 100 pixelů, pak je nahoře a dole vyžadováno odsazení 150 pixelů.

150 + 150 + 100 = 400

Použití % umožňuje ponechat výpočty na prohlížeči.

Tato metoda funguje všude. Nevýhodou je nutnost výpočtů.

Poznámka: Tato metoda funguje nastavením okraje prvku. Můžete také použít okraje v rámci prvku. Rozhodnutí použít okraje nebo výplň by mělo být učiněno v závislosti na specifikách projektu.

plovoucí div

Tato metoda používá prázdný prvek div, který se vznáší a pomáhá řídit pozici našeho vnořeného prvku v dokumentu. Všimněte si, že plovoucí prvek div je v kódu HTML umístěn před naším vnořeným prvkem.

HTML:

CSS:

#parent (výška: 250px;) #floater (plovoucí: vlevo; výška: 50%; šířka: 100%; margin-bottom: -50px; ) #child (clear: both; height: 100px; )

Prázdný prvek div odsadíme doleva nebo doprava a dáme mu výšku 50 % nadřazeného prvku. Tímto způsobem vyplní horní polovinu nadřazeného prvku.

Protože je tento prvek div plovoucí, je odstraněn z normálního toku dokumentu a musíme rozvinout vnořený prvek. V příkladu je použito clear: both , ale stačí použít stejný směr jako offset plovoucího prázdného prvku div.

Horní okraj vnořeného prvku div je přímo pod spodním okrajem prázdného prvku div. Potřebujeme posunout vnořený prvek nahoru o polovinu výšky plovoucího prázdného prvku. K vyřešení problému se používá záporná hodnota vlastnosti margin-bottom pro plovoucí prázdný prvek div.

Tato metoda funguje také ve všech prohlížečích. Jeho použití však vyžaduje další prázdný prvek div a znalost výšky vnořeného prvku.

Závěr

Všechny popsané metody jsou snadno použitelné. Potíž spočívá v tom, že žádný z nich není vhodný pro všechny případy. Je potřeba analyzovat projekt a vybrat ten, který nejlépe vyhovuje požadavkům.

Vysvětlení problému: je nutné nastavit vertikální zarovnání pro prvky inline nebo inline-block uvnitř prvku bloku.

Přístupy k řešení problémů. Existují různé způsoby, zvažte ty hlavní:

1. Reprezentujte prvek bloku jako buňku tabulky (zobrazení: table-cell ).
2. IE6-7: expresní metoda.
3. Vyrovnání řádkování (vlastnost line-height) a výšky bloku (u jednořádkových prvků).
4. Polohování s externím blokem (position:absolute ).

Když to shrnu, zvažte jinou metodu:

5. Zarovnání pomocí vlastnosti vertical-align.

displej: tabulka-buňka

Pro vertikální zarovnání se vlastnost display: table-cell aplikuje na nadřazený blok, díky čemuž prvek emuluje buňku tabulky. Je mu také dána výška a vertikální zarovnání: střed:

Klady:

• Jednoduchost;
• Zarovná jednu i více čar.

mínusy:

• Nefunguje v IE7 a nižších;
• Bez dalších konstrukcí je obtížné manipulovat s horizontální polohou venkovní jednotky;
• Ne každý má rád skutečnost, že používá display: table-cell .

IE6-7: expresní metoda

Protože předchozí metoda nefunguje v IE6-7, pak musíte tuto nepříjemnost opravit.

Expression - krátké části kódu JS, které jsou umístěny ve stylů, jsou provedeny jednou a fungují pouze v IE. Výrazy jsou neplatné. Přidejte k předchozímu příkladu v souborech stylů pro IE6 a 7 následující část kódu:

Wrapper p ( z-index: expression(runtimeStyle.zIndex = 1, this == ((200/2)-parseInt(offsetHeight)/2)< 0 ? style.marginTop="0" : style.marginTop=(200/2)-(parseInt(offsetHeight)/2) +"px"); }

Nemá smysl zvažovat výhody a nevýhody, protože. neexistují žádné výhody, kromě toho, že tato metoda doplňuje první v IE6-7, ale protože tyto prohlížeče jsou již zastaralé, můžete nad nimi přimhouřit oči.

výška čáry

Chcete-li zarovnat jeden řádek textu, můžete použít stejné hodnoty výšky a řádkování pro nadřazený blok. Vhodné pro tlačítka, položky nabídky atd.

Klady:

• Jednoduchost;
• Kompatibilita s prohlížečem.

mínusy:

• Vhodné pouze pro jednořádkové prvky;
• Umožňuje zarovnat pouze na střed.

pozice a záporná marže nahoru

Prvek lze svisle zarovnat tak, že mu přidělíte pevnou výšku a použijete polohu: absolutní a záporný okraj nahoře rovný polovině výšky zarovnávaného prvku. Rodičovský blok by měl mít pozici: relativní :

Klady:

• Kompatibilita mezi prohlížeči;
• Prvky můžete zarovnat buď na střed, nebo na jakoukoli jinou pozici.

mínusy:

• Časová náročnost s velkým počtem prvků;
• Obtížné na správu;
• Potřebujete znát a opravit výšku prvku;
• V některých prohlížečích může absolutní umístění způsobit snížení výkonu.

Souhrn populárních metod

Jak vidíte, tyto metody nejsou univerzální - každá z nich má, i když malé, ale nevýhody. Nejuniverzálnější metodou je display: table-cell , ale nikdy se mi to nelíbilo a kromě toho jsme podporu IE6-7 neodmítli velmi dlouho. Proto bylo potřeba zapracovat na něčem univerzálnějším. Zvažte možnost Zarovnání pomocí svislého zarovnání .

Zarovnání pomocí svislého zarovnání

Jak víte, vlastnost vertical-align nefunguje pro prvky na úrovni bloku, takže použití této vlastnosti na ně je zbytečné. Tato vlastnost však funguje skvěle pro prvky inline a inline-block. Pokud se pokusíme aplikovat tuto vlastnost na prvky uvnitř prvku bloku, dostaneme následující obrázek:

Jak vidíte, prvky jsou zarovnány vzhledem k čáře a ne k celému bloku, což pro nás není vhodné. Pak zkusme přidat prvek dovnitř bloku (protože u vnořeného prvku nelze nastavit výšku, prvek musí být inline-block ) s výškou rovnou výšce vnějšího bloku. Přidávání (na obrázku níže je zobrazena šedou čarou) a dostaneme:

Sada pro všechny prvky vertical-align:middle .

Tak jsme vycentrovali jednu čáru tímto způsobem. Co když potřebujete více řádků? A nejsou žádné problémy. Pro textové prvky stačí nastavit display:inline-block:

Pokud pro nás není důležitá kompatibilita se staršími verzemi IE, pak prvek můžeme smazat a nahradit jeho styly:

Wrapper:after ( content:""; display:inline-block; height:100%; width:0px; overflow:hidden; vertical-align:middle; )

Stojí za zmínku několik bodů:

• Prvky, které jsou zarovnané, nelze plovoucí.
• Mezi sousedními prvky inline bloku je vždy vzdálenost, takže pokud je třeba je stlačit k sobě, musí být vnější blok nastaven na velikost písma: 0px; a obnovit samotné prvky nastavením požadované hodnoty.
• Tímto způsobem mohou být vnitřní prvky nastaveny na stejné hodnoty (nahoře, dole nebo uprostřed) nebo různé hodnoty.

Klady:

Potřeba měsíční platby za propagaci webu ve vyhledávači. Hlavní práce na webu pro jeho efektivní propagaci a náklady na práci
Chtěl bych jednou zaplatit za propagaci svých stránek a být vždy vysoko ve výsledcích vyhledávání na konkurenční dotazy, je to možné?

Podpora provozu: dotazy a odpovědi zákazníků
Řada dotazů na propagaci webu z hlediska návštěvnosti. Nuance účtování, kalkulace nákladů na práci, platba předplatného.

Nejčastější dotazy ohledně webové analýzy (FAQ)
Otázky, které často kladou zákazníci služeb webové analýzy a poskytování samotné služby. Co je webová analytika? Proč projekt potřebuje webovou analýzu? Proč potřebujete definovat KPI a jaké to jsou? A tak dále.

Jaká díla NENÍ zahrnuta v SEO v případě propagace v Pixel Plus?
Propagace ve vyhledávači zahrnuje velký seznam práce nutné k dosažení maximálních výsledků... Ale jaký druh práce není zahrnut v platbě za SEO?

Dostupnost textů pro propagaci webu, optimalizace SEO textů pro vyhledávací dotazy
Proč potřebujete text na webu? Nikdo to nečte!

Čas na propagaci a provádění změn výsledků propagace webových stránek, rychlost reakce Yandex (Yandex) na provádění změn na webu
Zaplatil jsem za služby propagace stránek na měsíc. Už je to 10 dní a pozice v Yandexu se nezlepšily, pracuješ tam nebo ne?

Myslím, že mnozí z vás, kteří se zabývali rozvržením, se setkali s potřebou zarovnat prvky svisle a ví, jaké potíže vznikají při zarovnání prvku na střed.

Ano, pro vertikální zarovnání v CSS existuje speciální vlastnost vertical-align s mnoha hodnotami. V praxi to však nefunguje podle očekávání. Zkusme na to přijít.

Porovnejme následující přístupy. Zarovnání s:

• stoly,
• odsazení,
• výška čáry,
• protahování,
• záporná marže,
• přeměnit ,
• pseudo prvek
• flexbox.

Existují dva prvky div, přičemž jeden je vnořen do druhého. Dejme jim příslušné třídy – vnější a vnitřní .

Pro začátek zvažte případ, kdy jsou velikosti vnějšího a vnitřního bloku známý. Přidejme display: inline-block k vnitřnímu prvku a text-align: center a vertical-align: middle k vnějšímu prvku.

Pamatujte, že zarovnání se vztahuje pouze na prvky, které mají režim zobrazení inline nebo inline-block.

Nastavíme velikosti bloků a také barvy pozadí, abychom viděli jejich okraje.

Vnější ( šířka: 200px; výška: 200px; text-align: center; vertical-align: middle; background-color: #ffc; ) .inner ( display: inline-block; width: 100px; height: 100px; background-color : #fcc ;)
Po použití stylů uvidíme, že vnitřní blok je zarovnán vodorovně, ale ne svisle:
http://jsfiddle.net/c1bgfffq/

Proč se to stalo? Faktem je, že vlastnost vertical-align ovlivňuje zarovnání prvek samotný, nikoli jeho obsah(kromě případů, kdy je aplikován na buňky tabulky). Použití této vlastnosti na vnější prvek tedy neudělalo nic. Navíc aplikace této vlastnosti na vnitřní prvek také nic neudělá, protože vložené bloky jsou svisle zarovnány se sousedními bloky a v našem případě máme jeden vložený blok.

Existuje několik technik, jak tento problém vyřešit. Podívejme se níže na každý z nich blíže.

Zarovnání s tabulkou

Zjevnou nevýhodou tohoto řešení je, že z hlediska sémantiky je chybné používat k zarovnání tabulky. Druhou nevýhodou je, že pro vytvoření tabulky je potřeba přidat kolem vnějšího bloku ještě jeden prvek.

První mínus lze částečně odstranit nahrazením tagů table a td div a nastavením režimu zobrazení tabulky v CSS.

Zarovnání s vycpávkou

Vnější ( výška: 200px; ) .vnitřní (výška: 100px; okraj: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Nevýhodou řešení je, že je použitelné pouze v omezeném počtu případů, kdy jsou známé výšky obou bloků.

Zarovnání s výškou čáry

Vnější ( výška: 200px; výška řádku: 200px; ) .vnitřní ( white-space: nowrap; overflow: hidden; )
http://jsfiddle.net/c1bgfffq/12/

Tuto techniku ​​lze také použít k zarovnání víceřádkového textu, pokud přepíšete hodnotu výšky řádku pro vnitřní blok a přidáte zobrazení pravidel: inline-block a vertical-align: middle .

Outer ( height: 200px; line-height: 200px; ) .inner ( line-height: normal; display: inline-block; vertical-align: middle; )
http://jsfiddle.net/c1bgfffq/15/

Nevýhodou této metody je, že musí být známa výška vnějšího bloku.

Roztažení zarovnání

K tomu potřebujete:

1. nastavení relativní polohy k vnějšímu bloku a absolutní polohy k vnitřnímu bloku;
2. přidejte pravidla top: 0 a bottom: 0 k vnitřnímu bloku, v důsledku čehož se roztáhne na celou výšku vnějšího bloku;
3. nastavte hodnotu na auto pro vertikální výplň vnitřního bloku.

Podstatou této techniky je, že nastavení výšky pro roztažený a absolutně umístěný blok způsobí, že prohlížeč vypočítá vertikální výplň ve stejných poměrech, pokud je jejich hodnota nastavena na auto.

Zarovnání se záporným okrajem-vrchol

Musíte nastavit vnější blok na relativní umístění a vnitřní blok na absolutní umístění. Potom musíte posunout vnitřní krabici dolů o polovinu výšky horní části vnější krabice: 50 % a posunout ji nahoru o polovinu její vlastní výšky okraj-horní: -H vnitřní / 2.

Vnější ( pozice: relativní; ) .vnitřní ( výška: 100px; pozice: absolutní; nahoře: 50 %; margin-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/

Nevýhodou této metody je, že musí být známa výška vnitřní jednotky.

Zarovnání s transformací

Vnější ( pozice: relativní; ) .vnitřní ( pozice: absolutní; nahoře: 50 %; transformace: přeložitY(-50 %); )
http://jsfiddle.net/c1bgfffq/9/

Proč v předchozí metodě nebylo možné nastavit hodnotu v procentech? Protože procentuální hodnoty vlastnosti margin jsou relativní k rodičovskému prvku, hodnota 50 % by se rovnala polovině výšky vnějšího rámečku a vnitřní rámeček bychom museli zvednout o polovinu jeho vlastní výšky. Přesně k tomu slouží vlastnost transform.

Nevýhodou této metody je, že ji nelze použít, pokud má vnitřní blok absolutní polohování.

Zarovnání s Flexboxem

Vnější blok musí být nastaven na zobrazení: flex a vnitřní blok musí být nastaven na margin: auto. A to je všechno! Krásné, že?

Vnější ( displej: flex; šířka: 200px; výška: 200px; ) .vnitřní ( šířka: 100px; okraj: auto; )
http://jsfiddle.net/c1bgfffq/14/

Nevýhodou této metody je, že Flexbox podporují pouze moderní prohlížeče.

Jaký způsob zvolit?

• Pro vertikální zarovnání textu je lepší použít vertikální odsazení nebo vlastnost line-height.
• Pro absolutně umístěné prvky se známou výškou (jako jsou ikony) je ideální přístup záporného okraje.
• Pro složitější případy, kdy výška bloku není známa, by se měl použít pseudoelement nebo vlastnost transform.
• No, pokud máte to štěstí, že nepotřebujete podporovat starší verze IE, pak je samozřejmě lepší Flexbox.

V tomto článku vám ukážu, jak umístit blok div střed. Existuje mnoho způsobů, ale ne všechny vám umožňují dělat přesně to, co je požadováno. Uvedu příklad nejlepších a nejjednodušších způsobů.

Obecně existuje tucet způsobů, jak správně vycentrovat blok div, každý webmaster používá svůj oblíbený / nejpohodlnější způsob. Existuje však několik základních, nejoblíbenějších a univerzálních způsobů. A samozřejmě platí podle všech moderních standardů.

A ano, hned stojí za to říci, že tyto metody nemusí fungovat v ie6 nebo něčem podobném. Tomuto prohlížeči ani nevěnuji pozornost, bez ohledu na to, kolik lidí ho používá. Je čas se odvyknout od používání nevyžádaných věcí.

Tak co máme?

Metoda 1. Nejlepší

Velmi efektivní metoda, která navíc umožňuje zarovnat horní a spodní odsazení. Jaký je smysl metody? Všechno je prostě šílené. Máme blok s určitou šířkou (v pixelech nebo procentech), kterému pomocí vlastnosti „auto“ nastavíme stejné odsazení vpravo i vlevo, ve výsledku získáme ve středu blok div. První hodnota (v příkladu 0) je horní a spodní výplň.

Například pro horní zarovnání napíšeme:

Okraj: 10px auto;

Chcete-li zarovnat horní a dolní část:

Margin:10px auto 5px;

Podle mého názoru je to nejlepší způsob zarovnat bloky na střed. Navíc je to zcela platné.

Metoda 2. Procento

Pokud má blok šířku v procentech, pak můžeme zarovnat div střed použití stejné výplně, aby byla plná šířka 100 %. Pro ty, kteří nerozumí, ukážu to na příkladu, je to jednodušší:

Máme blok o šířce 50 %, abychom jej zarovnali na střed, musíme udělat boční odsazení 25 % doprava a doleva. Podívejme se na kód:

Bez namáhání získáme blok ve středu, zarovnaný s banální matematikou (50 + 25 + 25) 🙂

Metoda 3. Smíšené

Tato metoda byla doporučena v komentářích. sman.

Jak jsem zmínil na začátku článku, existuje spousta způsobů, jak zarovnat blok na střed. Každý si vybere tu, která se mu nejvíce líbí. Čekám na komentáře a nové způsoby 🙂

Metoda 4. Použití dalšího bloku

Cesta Vítěz v komentářích:

Žádná metoda neřeší problém s plováky uvnitř bloku, pokud není známa šířka bloku (například nabídka).

V takových případech používám další blok, který obalí zarovnaný blok. Styl takto:

Od autora: Vítám vás zpět na stránkách našeho blogu. V dnešním článku bych chtěl mluvit o různých technikách zarovnání, které lze aplikovat jak na bloky, tak na jejich obsah. Zejména jak zarovnávat bloky v css a také zarovnávání textu.

Zarovnejte bloky na střed

Je snadné vycentrovat blok v css. Toto je pro mnohé nejznámější technika, ale rád bych o ní mluvil právě teď. To je myšleno tak, aby bylo vystředěno vodorovně vzhledem k rodičovskému prvku. Jak se to provádí? Řekněme, že máme kontejner a náš testovaný subjekt je v něm:

Předpokládejme, že se jedná o hlavičku webu. Nezasahuje přes celou šířku okna a musíme jej vycentrovat. Píšeme takto:

Musíme zadat přesnou nebo maximální šířku a poté napsat vlastnost klíče - margin: 0 auto. Nastavuje okraje pro naši hlavičku, první hodnota určuje okraje shora a zdola a druhá - doprava a doleva. Hodnota auto dává prohlížeči pokyn, aby automaticky vypočítal odsazení na obou stranách tak, aby byl prvek přesně vycentrován na nadřazený prvek. Komfortní!

Zarovnání textu

To je také velmi jednoduchý trik. Chcete-li zarovnat všechny vložené prvky, můžete použít vlastnost zarovnání textu a její hodnoty: vlevo, vpravo, na střed. Ten vycentruje text, což je to, co chceme. Stejným způsobem lze zarovnat i obrázek, protože se také standardně jedná o vložený prvek.

Zarovnejte text svisle

To už je ale složitější. Ve výchozím nastavení neexistuje žádná taková jednoduchá známá vlastnost, která by snadno vertikálně vycentrovala text v blokovém kontejneru. Existuje však několik triků, které designéři rozvržení v průběhu let vymysleli.

Nastavte výšku bloku pomocí odsazení. Způsob je nenastavovat explicitní výšku s výškou, ale vytvořit ji uměle pomocí horních a spodních vycpávek, které by měly být stejné. Vytvořme libovolný blok a zapišme do něj následující vlastnosti:

div( pozadí: #ccc; padding: 30px 0; )

Pozadí slouží pouze k vizuálnímu zobrazení okrajů a vycpávek. Výška bloku je nyní tvořena těmito dvěma odrážkami a čárou samotnou a vše vypadá takto:

Definujte výšku čáry pro blok. Zdá se mi, že je to správnější způsob, pokud potřebujete zarovnat jeden řádek textu. S ním můžete zaznamenat normální výšku pomocí vlastnosti height. Poté musí také nastavit výšku čáry, stejnou jako je výška bloku jako celku.

div( výška: 60px; výška řádku: 60px; )

Výsledek bude podobný jako na obrázku výše. Vše bude fungovat, i když přidáte vycpávky. Ovšem pouze na jeden řádek. Pokud potřebujete více textu v prvku, pak tato metoda nebude fungovat.

Převést blok na buňku tabulky. Podstatou této metody je, že vlastnost vertical-align: middle působí na buňku tabulky, která prvek vertikálně vycentruje. Proto musí být v tomto případě blok nastaven na následující:

div( display: table-cell; vertical-align: middle; )

Tato metoda je příjemná, protože můžete zarovnat na střed tolik textu, kolik chcete. Ale je lepší nastavit display: table na blok, ve kterém je náš div vnořený, jinak to nemusí fungovat.

No a tady se dostáváme k poslednímu triku pro dnešek – tím je zarovnání samotných bloků vertikálně. Je třeba říci, že opět neexistuje žádná vlastnost, která by byla určena speciálně pro toto, ale existuje několik triků, kterých byste si měli být vědomi.

Nastavte offsety v procentech. Pokud znáte výšku nadřazeného prvku a umístíte do něj další prvek na úrovni bloku, můžete jej vycentrovat pomocí procentuálního odsazení. Například rodič má výšku 600px. Vložíte do něj blok, který má výšku 300px. Jak moc musíte couvat shora a zdola, abyste to vycentrovali? 150 pixelů každý, což je 25 % výšky rodiče.

Tato metoda umožňuje provádět centrování pouze tehdy, když rozměry umožňují provádět výpočty. A pokud máte rodiče 887 pixelů na výšku, pak nebudete moci napsat nic přesně, to je již jasné.

Vložte prvek do buňky tabulky. Opět, pokud převedeme nadřazený prvek na buňku tabulky, pak se do ní vložený blok automaticky svisle vycentruje. Chcete-li to provést, rodič stačí nastavit vertikální zarovnání: na střed.

A pokud k tomu navíc napíšeme margin: 0 auto, pak bude prvek vycentrován vodorovně!