Vertikální centrování v div. Absolutní horizontální a vertikální centrování
Vlad Merževič
Vzhledem k tomu, že obsah buněk tabulky lze současně horizontálně i vertikálně zarovnávat, rozšiřují se možnosti řízení polohy prvků vůči sobě. Tabulky umožňují nastavit zarovnání obrázků, textu, polí formulářů a dalších prvků vůči sobě navzájem a vůči webové stránce jako celku. Obecně je zarovnání nutné hlavně k vytvoření vizuálních spojení mezi různými prvky a také k jejich seskupení.
Vertikální centrování
Jedním ze způsobů, jak ukázat návštěvníkovi zaměření a název webu, je použít úvodní stránku. Toto je první stránka, na které se zpravidla nachází flashová úvodní obrazovka nebo obrázek vyjadřující hlavní myšlenku webu. Obrázek je zároveň odkazem na další sekce webu. Tento obrázek musíte umístit do středu okna prohlížeče bez ohledu na rozlišení monitoru. K tomuto účelu můžete použít stůl o šířce a výšce 100 % (příklad 1).
Příklad 1: Vystředění výkresu
|
V tomto příkladu je vodorovné zarovnání nastaveno pomocí parametru tagu align="center".
Chcete-li nastavit výšku stolu na 100 %, musíte jej odstranit, kód přestává být platný.
Použití šířky a výšky k pokrytí celé dostupné oblasti webové stránky zajistí, že obsah tabulky bude zarovnán přesně do středu okna prohlížeče bez ohledu na jeho velikost.
Horizontální zarovnání
Kombinací atributů align (horizontální zarovnání) a valign (vertikální zarovnání) značky
Podívejme se na některé příklady zarovnání textu podle obrázku níže.
Zarovnání nahoru
Chcete-li určit horní zarovnání obsahu buňky pro značku
Příklad 2: Použití valign
| Sloupec 1 | Sloupec 2 |
V tomto příkladu jsou charakteristiky buňky řízeny pomocí parametrů tagu
Zejména zarovnání v buňkách je určeno vlastnostmi vertikálního zarovnání a zarovnání textu (příklad 3).
| Sloupec 1 | Sloupec 2 |
Příklad 3: Použití stylů pro zarovnání
Ke zkrácení kódu používá tento příklad seskupení selektorů, protože vlastnosti vertikálního zarovnání a odsazení jsou aplikovány na dvě buňky současně.
Spodní zarovnání se provádí stejným způsobem, ale místo horní hodnoty se použije spodní.
Zarovnání na střed
Ve výchozím nastavení je obsah buněk zarovnán na střed jejich svislé čáry, takže pokud mají sloupce různé výšky, musíte zarovnání nastavit k hornímu okraji.
Někdy je stále potřeba ponechat původní způsob zarovnání, například při umisťování vzorců, jak je znázorněno na Obr. 2.
 |
(18.6) |
V tomto případě je vzorec umístěn přesně ve středu okna prohlížeče a jeho číslo je umístěno na pravém okraji. Chcete-li prvky uspořádat tímto způsobem, budete potřebovat tabulku se třemi buňkami. Krajní buňky by měly mít stejné rozměry, ve střední buňce se zarovnání provádí uprostřed a v pravé - podél pravého okraje (příklad 4). Tento počet buněk je nutný k tomu, aby byl vzorec umístěn uprostřed.
Příklad 4: Zarovnání vzorce
V tomto příkladu je první buňka tabulky ponechána prázdná, slouží pouze k vytvoření odsazení, které lze mimochodem také nastavit pomocí stylů.
Zarovnání prvků formuláře
Pomocí tabulek je vhodné určit polohu polí formuláře, zvláště když jsou proložena textem. Jedna z možností návrhu formuláře, který je určen pro zadání komentáře, je na Obr. 3.
Komentář
Velmi často je úkolem zarovnat blok na střed stránky/obrazovky, a to i tak, aby bez Java skriptu, bez nastavování pevných rozměrů nebo záporných odsazení a aby posuvníky fungovaly pro rodiče, pokud blok překročí svou velikost . Monotónních příkladů, jak zarovnat blok na střed obrazovky, je na internetu poměrně dost. Většina z nich je zpravidla založena na stejných principech.
Níže jsou uvedeny hlavní způsoby řešení problému, jejich klady a zápory. Pro pochopení podstaty příkladů doporučuji zmenšit výšku/šířku okna Výsledek v příkladech na uvedených odkazech.
Možnost 1: Záporné odsazení.
Polohování blok atributy nahoře a vlevo o 50 % a s vědomím výšky a šířky bloku předem nastavte záporný okraj, který se rovná polovině velikosti blok. Obrovskou nevýhodou této možnosti je, že musíte počítat záporné odrážky. Také blok nechová se zcela správně, když je obklopena posuvníky - je jednoduše oříznuta, protože má záporné okraje.
Nadřazený ( šířka: 100 %; výška: 100 %; pozice: absolutní; nahoře: 0; vlevo: 0; přetečení: auto; ) .block ( šířka: 250px; výška: 250px; pozice: absolutní; nahoře: 50 %; vlevo : 50 % okraj: -125px 0 0 -125px img (max. šířka: 100 %; výška: auto; zobrazení: blok; okraj: 0 auto; okraj: žádný; ) )
Možnost 2. Automatické odsazení.
Méně časté, ale podobné prvnímu. Pro blok nastavíme šířku a výšku, umístíme atributy vpravo dole vlevo na 0 a nastavíme automatický okraj. Výhodou této možnosti jsou funkční posuvníky rodič, pokud má 100% šířku a výšku. Nevýhodou této metody je tuhé nastavení rozměrů.
Nadřazený ( šířka: 100 %; výška: 100 %; pozice: absolutní; nahoře: 0; vlevo: 0; přetečení: auto; ) .block ( šířka: 250px; výška: 250px; pozice: absolutní; nahoře: 0; vpravo: 0 dole: 0 vlevo: 0;
Možnost 3. Tabulka.
Zeptejme se rodič styly tabulky, buň rodič Nastavte zarovnání textu na střed. A blok nastavíme model liniového bloku. Nevýhody, které dostáváme, jsou nefunkční posuvníky a obecně estetika „emulace“ tabulky není dobrá.
Nadřazená položka ( šířka: 100 %; výška: 100 %; zobrazení: tabulka; pozice: absolutní; nahoře: 0; vlevo: 0; > .inner ( display: tabulka-buňka; zarovnání textu: na střed; svislé zarovnání: na střed; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )
Chcete-li k tomuto příkladu přidat svitek, budete muset do návrhu přidat ještě jeden prvek.
Příklad: jsfiddle.net/serdidg/fk5nqh52/3.
Možnost 4. Pseudoprvek.
Tato možnost postrádá všechny problémy uvedené v předchozích metodách a také řeší původní problémy. Jde o to rodič nastavit styly pseudo prvek dříve, konkrétně 100% výška, zarovnání na střed a inline blokový model. Stejné je to s blok model čárového bloku je umístěn, vycentrován. Na blok"nespadl" pod pseudo prvek, když rozměry prvního jsou větší než rodič, uveďte rodič white-space: nowrap a font-size: 0, po kterém blok zrušte tyto styly následujícím způsobem - white-space: normal. V tomto příkladu je potřeba font-size: 0 k odstranění výsledné mezery mezi rodič A blok kvůli formátování kódu. Prostor lze odstranit jinými způsoby, ale považuje se za nejlepší se mu jednoduše vyhnout.
Nadřazená položka ( šířka: 100 %; výška: 100 %; pozice: absolutní; nahoře: 0; vlevo: 0; přetečení: auto; mezera: nowrap; zarovnání textu: na střed; velikost písma: 0; &:před ( výška: 100%: inline-blok: střední obsah: "" ;
Nebo pokud potřebujete, aby rodič zabral pouze výšku a šířku okna a ne celou stránku:
Rodič ( pozice: pevná; nahoře: 0; vpravo: 0; dole: 0; vlevo: 0; přetečení: auto; mezera: nowrap; zarovnání textu: na střed; velikost písma: 0; &:před ( výška: 100 % zobrazení: inline-blok: střední obsah: "";
Možnost 5. Flexbox.
Jedním z nejjednodušších a nejelegantnějších způsobů je použití flexboxu. Nevyžaduje zbytečné pohyby těla, zcela jasně popisuje podstatu toho, co se děje, a je vysoce flexibilní. Jediné, co stojí za to pamatovat při výběru této metody, je podpora IE od verze 10 včetně. caniuse.com/#feat=flexbox
Rodič ( šířka: 100 %; výška: 100 %; poloha: pevná; nahoře: 0; vlevo: 0; zobrazení: flex; zarovnat-položky: na střed; zarovnat-obsah: na střed; zarovnat-obsah: na střed; přetečení: auto; ) .block ( background: #60a839; img ( display: block; border: none; ) )
Možnost 6. Transformace.
Vhodné v případě, že jsme omezeni strukturou a s rodičovským prvkem nelze nijak manipulovat, ale blok je potřeba nějak zarovnat. Na pomoc přijde css funkce translate(). Hodnota 50% absolutního umístění umístí levý horní roh bloku přesně do středu, poté záporná hodnota posunutí posune blok vzhledem k jeho vlastním rozměrům. Upozorňujeme, že se mohou objevit negativní efekty v podobě rozmazaných okrajů nebo stylu písma. Tato metoda může také vést k problémům s výpočtem pozice bloku pomocí java-scriptu Někdy může pro kompenzaci ztráty 50 % šířky v důsledku použití vlastnosti CSS left pravidlo určené pro blok. nápověda: margin-right: -50 % .
Rodič ( šířka: 100 %; výška: 100 %; pozice: pevná; nahoře: 0; vlevo: 0; přetečení: auto; ) .block ( pozice: absolutní; nahoře: 50 %; vlevo: 50 %; transform: translate( -50 %, -50 %) img ( zobrazení: blok; ) )
Možnost 7. Tlačítko.
Uživatelská možnost kde blok orámované štítkem na knoflíku. Tlačítko má tu vlastnost, že centruje vše, co je uvnitř, tedy prvky inline a block-line (inline-block) modelu. V praxi nedoporučuji používat.
Rodič ( šířka: 100 %; výška: 100 %; pozice: absolutní; nahoře: 0; vlevo: 0; přetečení: auto; pozadí: žádné; ohraničení: žádné; obrys: žádné; ) .block ( zobrazení: inline-block; img (zobrazení: blok;; ohraničení: žádné; ) )
Bonus
Pomocí myšlenky 4. možnosti můžete nastavit vnější okraje pro blok, a ten bude adekvátně zobrazen obklopený posuvníky.Příklad: jsfiddle.net/serdidg/nfqg9rza/2.
Můžete také zarovnat obrázek na střed a pokud je obrázek větší rodič, upravte jej na velikost rodič.
Příklad: jsfiddle.net/serdidg/nfqg9rza/3.
Příklad s velkým obrázkem:
V CSS se některé zdánlivě jednoduché věci nedělají tak snadno. Jednou z těchto věcí je zarovnání, tzn. když jeden prvek potřebuje být umístěn určitým způsobem vzhledem k druhému.
Tento článek představuje některá hotová řešení, která pomohou zjednodušit práci centrovacích prvků vodorovně a/nebo svisle.
Poznámka: Pod každým řešením je seznam prohlížečů s uvedením verzí, ve kterých zadaný kód CSS funguje.
CSS - Center Align Block
1. Zarovnání jednoho bloku na střed druhého. V tomto případě mají první a druhý blok dynamické velikosti.
Rodič ( pozice: relativní; ) .child ( pozice: absolutní; vlevo: 50 %; nahoře: 50 %; -webkit-transform: translate(-50 %, -50 %); -moz-transform: translate(-50 % , -50%) -ms-transform: přeložit (-50%, -50%); ;
- Chrome 4.0+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 10.5+
- Safari 3.1+
2. Zarovnání jednoho bloku na střed druhého. V tomto případě má druhý blok pevné rozměry.
Rodič ( pozice: relativní; ) .child ( pozice: absolutní; vlevo: 50 %; nahoře: 50 %; /* šířka a výška 2 bloků */ šířka: 500px; výška: 250px; /* Hodnoty se určují v závislosti na jeho velikosti */ /* margin-left = - šířka / 2 */ margin-left: -250px; /* margin-top = - výška / 2 */ margin-top: -125px )
Prohlížeče, které toto řešení podporují:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
3. Zarovnání jednoho bloku na střed druhého. V tomto případě má druhý blok rozměry zadané v procentech.
Parent ( position: relativní; ) .child ( position: absolute; /* šířka a výška 2 bloků v % */ výška: 50 %; šířka: 50 %; /* Hodnoty jsou určeny v závislosti na jeho velikosti v % * / vlevo: 25 % /* (100 % - šířka) / 2 */ nahoře: 25 % /* (100 % - výška) / 2 */ )
Prohlížeče, které toto řešení podporují:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
CSS - Horizontální zarovnání
1. Horizontální zarovnání jednoho prvku bloku (zobrazení: bloku) vůči druhému (ve kterém se nachází):
Blokovat (levý okraj: auto; pravý okraj: auto; )
Prohlížeče, které toto řešení podporují:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 6.0+
- Opera 3.5+
- Safari 1.0+
2. Zarovnejte řádek (zobrazení: inline) nebo řádek-blok (zobrazení: inline-block) vodorovně:
Nadřazený ( text-align: center; ) .child ( display: inline-block; )
Prohlížeče, které toto řešení podporují:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
CSS - Vertical Alignment
1. Vycentrujte jeden prvek (zobrazení: inline, display: inline-block) vzhledem k druhému (ve kterém se nachází) na střed. Nadřazený blok v tomto příkladu má pevnou výšku, která se nastavuje pomocí vlastnosti CSS line-height.
Parent ( line-height: 500px; ) .child ( display: inline-block; vertical-align: middle; )
Prohlížeče, které toto řešení podporují:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Svisle vystředění jednoho bloku vzhledem k druhému tak, že bude rodič reprezentován jako tabulka a potomek jako buňka této tabulky.
Nadřazený ( display: table; ) .child ( display: table-cell; vertical-align: middle; )
Prohlížeče, které toto řešení podporují:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
Pokud znáte nějaké další zajímavé triky nebo užitečná hotová řešení zarovnání, podělte se o ně v komentářích.
Designér má někdy otázku: jak centrovat prvky svisle? A to způsobuje určité problémy. Existuje však několik metod vertikálního centrování prvků a každá z těchto metod je poměrně jednoduchá. Tento článek popisuje některé z těchto metod.
Chcete-li vidět jednotlivé metody v akci, klikněte na tlačítko demo nebo na obrázek.
Pojďme diskutovat o některých problémech, které brání vertikálnímu centrování.
Vertical-Align
Horizontální centrování prvku je poměrně snadné implementovat (pomocí CSS). Vložený prvek lze vodorovně vycentrovat tak, že jeho nadřazenému kontejneru přiřadíte vlastnost zarovnání textu center . Když je prvkem blokový prvek, k jeho vystředění stačí nastavit šířku (šířku) a nastavit hodnoty pravého (margin-right) a levého (margin-left) okraje na auto .
Ohledně textu: mnoho lidí začíná používat vlastnost vertical-align pro centrování. Dává to smysl a moje první volba by byla stejná. Chcete-li vycentrovat prvek v tabulce, můžete použít atribut valign.
Atribut valign však funguje pouze při použití na buňku (například ). Vlastnost CSS vertical-align lze použít na buňku a některé vložené prvky.
- Text je vystředěn vzhledem k výšce řádku (řádkování).
- Ve vztahu k tabulce, aniž bychom zacházeli do podrobností, dochází k vystředění vzhledem k výšce řádku.
Vlastnost vertical-align bohužel nelze použít na prvky na úrovni bloku, jako je odstavec (p) uvnitř značky div.
Existují však i jiné metody pro svislé centrování prvků a v případě potřeby můžete stále použít vlastnost vertical-align. Kterou metodu použít, závisí na tom, co budete centrovat.
Řádkování nebo Výška řádku
Tato metoda by se měla používat pouze v případě, že potřebujete vycentrovat řádek textu. Chcete-li to provést, musíte nastavit výšku řádku (řádkování) prvku, který obsahuje text, na větší, než je velikost písma.
Ve výchozím nastavení je nad a pod textem stejný prostor, takže text je svisle vycentrován.
V tomto případě není nutné zadávat výšku nadřazeného prvku.
#child ( výška řádku: 200px; )
Tato metoda funguje ve všech prohlížečích, ale nezapomeňte, že by měla být použita pro řádek textu. Pokud váš text zabírá více než jeden řádek, použijte jinou metodu. Hodnota vlastnosti line-height může být jakákoliv, ale ne menší než výška písma. V praxi tato metoda skvěle funguje pro centrování horizontálního menu.
Metoda CSS pomocí vlastností tabulky
Jak jsem již psal, obsah buňky lze vycentrovat pomocí CSS vlastnosti vertical-align. Nadřazený prvek musí být reprezentován jako tabulka, podřízený prvek musí být označen jako buňka a musí na něj být aplikována vlastnost vertical-align s hodnotou middle . Tímto způsobem bude jakýkoli obsah v podřízeném prvku vertikálně vycentrován. CSS kód je uveden níže.
#parent ( display: table;) #child ( display: table-cell; vertical-align: middle; )
Bohužel tato metoda nefunguje ve starších verzích prohlížeče IE. Pokud požadujete podporu prohlížeče pro IE6 a nižší, přidejte do podřízeného prvku deklaraci display: inline-block.
#child ( display: inline-block; )
Absolutní umístění a záporná marže
Tato metoda je navržena pro prvky na úrovni bloků a funguje ve všech prohlížečích. Musíte nastavit výšku prvku, který je třeba vycentrovat.
Níže je uveden kód, kde je podřízený prvek pomocí této metody vycentrován.
#rodič (pozice: relativní;) #dítě ( pozice: absolutní; nahoře: 50 %; vlevo: 50 %; výška: 30 %; šířka: 50 %; okraj: -15 % 0 0 -25 %; )
Nejprve je třeba umístit nadřazený a podřízený prvek. Poté nastavíme posun podřízeného prvku na 50 % vzhledem k horní a levé straně nadřazeného prvku, čímž podřízený prvek vycentrujeme vzhledem k nadřazenému prvku. Naše manipulace však vystředí pravý horní roh podřízeného prvku do středu nadřazeného prvku, což nám samozřejmě nevyhovuje.
Náš úkol: posunout podřízený prvek nahoru a doleva vzhledem k nadřazenému prvku tak, aby byl podřízený prvek vizuálně vertikálně a horizontálně vycentrován. Proto potřebujete znát výšku a šířku podřízeného prvku.
Měli bychom tedy přiřadit podřízenému prvku záporný horní a levý okraj rovný polovině šířky a výšky podřízeného prvku.
Na rozdíl od prvních dvou metod je tato metoda určena pro prvky na úrovni bloku. Metoda funguje ve všech prohlížečích, ale obsah může přesahovat výšku nadřazeného prvku a přesahovat jeho hranice. Tato metoda funguje nejlépe, když je výška a šířka prvků pevná.
Absolutní umístění podřízeného prvku
Stejně jako v předchozí metodě jsou nadřazené a podřízené prvky umístěny relativně a absolutně.
V kódu CSS vycentruji podřízený prvek svisle i vodorovně, můžete však použít pouze svislé vycentrování.
#rodič (pozice: relativní;) #dítě ( pozice: absolutní; nahoře: 0; dole: 0; vlevo: 0; vpravo: 0; šířka: 50 %; výška: 30 %; okraj: auto; )
Myšlenka této metody spočívá v tom, že můžete umístit podřízený prvek pomocí hodnot vlastností top , left , right , bottom rovných 0. Protože je náš podřízený prvek menší než nadřazený prvek, nebude se moci ” na nadřazený prvek.
Hodnoty okrajů pro všechny čtyři strany podřízeného prvku jsou nulové, což vycentruje prvek svisle vzhledem k nadřazenému prvku. Bohužel tato metoda má stejné nevýhody jako předchozí metoda: je nutné opravit výšku a šířku dítěte, nedostatek podpory pro starší prohlížeče IE.
Spodní a horní okraje jsou stejné
V této metodě explicitně přiřadíme stejné odsazení (dole a nahoře) rodičovskému prvku, který vizuálně vertikálně vycentruje podřízený prvek.
#rodič (výplň: 5 % 0; ) #dítě (výplň: 10 % 0; )
Používám relativní velikosti. Pokud jsou velikosti bloků pevné, budete muset provést nějaké matematické výpočty.
Pokud má například nadřazený prvek výšku 400 pixelů a podřízený prvek 100 pixelů, měli byste nastavit horní a dolní odsazení na 150 pixelů.
150 + 150 + 100 = 400
plovoucí div
Tato metoda zahrnuje prázdný plovoucí blok, který řídí vertikální polohu podřízeného prvku. Plovoucí prvek div musí být umístěn před podřízený prvek, viz HTML kód níže.
#parent (výška: 250px;) #floater (plovoucí: vlevo; výška: 50%; šířka: 100%; margin-bottom: -50px; ) #child (clear: both; height: 100px; )
Nejprve přesuneme plovoucí blok doleva (nebo doprava) a dáme mu výšku 50 % jeho rodiče. Tímto způsobem plovoucí blok vyplní horní polovinu nadřazeného prvku.
Protože je blok plovoucí, je odstraněn z obecného toku dokumentu, proto by podřízenému bloku měla být přiřazena vlastnost clear s hodnotou both . Nastavil jsem hodnotu na obě , ale můžete použít hodnotu, která odpovídá směru umístění plovoucího prvku.
V současné době leží horní okraj podřízeného prvku přímo pod spodním okrajem plovoucího prvku. Potřebujeme zvednout podřízený prvek na polovinu výšky plovoucího prvku. Chcete-li to provést, nastavte záporný spodní okraj pro plovoucí blok na 50 %.
Funguje ve všech prohlížečích. Nevýhodou této metody je, že vyžaduje prázdný blok a vyžaduje znalost výšky podřízeného prvku.
Dnes se, milý čtenáři, budeme zabývat problémem vertikálního vyrovnání v bloku div.
S největší pravděpodobností již víte o existenci nádherné vlastnosti CSS svisle zarovnat. A sám Bůh nám nařídil, abychom použili právě tuto vlastnost pro vertikální zarovnání (ne nadarmo má tak samovysvětlující název).
Prohlášení o problému: Obsah bloku s proměnnou výškou musíte vycentrovat vzhledem ke svislici.
Nyní začneme problém řešit.
A tak máme blok, jeho výška se může změnit:
První, co vás napadne, je udělat následující fintu:
Existují všechny důvody se domnívat, že fráze Blokovat obsah budou zarovnány na středovou výšku kontejneru div.
Ale nebylo tomu tak! Tímto způsobem nedosáhneme žádného očekávaného středového zarovnání. Proč? Zdálo by se, že je vše uvedeno správně. Ukazuje se, že toto je ten rub: vlastnost svisle zarovnat lze použít pouze k zarovnání obsahu buněk tabulky nebo k vzájemnému zarovnání vložených prvků.
Pokud jde o zarovnání uvnitř buňky tabulky, myslím, že je vše jasné. Ale vysvětlím jiný případ s vloženými prvky.
Vertikální zarovnání inline prvků
Předpokládejme, že máte řádek textu, který je rozdělen značkami řádků na díly:
Vy vítá vás kus text!
Inline tag je kontejner, jehož vzhled nezpůsobuje zalomení obsahu do nového řádku.
Akce značky bloku způsobí, že se obsah kontejneru zalomí na nový řádek.
je bloková značka. Uzavřeme-li kusy textu do bloků, pak každý z nich bude na novém řádku. Pomocí značky , který na rozdíl, je malá písmena, kontejnery nebudou přesunuty na nový řádek, všechny kontejnery zůstane na stejné lince.Kontejner vhodné pro použití při specifikaci části textu se speciálním formátováním (zvýraznění barvou, jiným fontem atd.)
Pro kontejnery Použijte následující vlastnosti CSS:
#perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy( vertical-align:-3px; )
Výsledný řádek textu bude vypadat takto:
Nejde o nic jiného než o vertikální zarovnání vložených prvků a vlastnost CSS svisle zarovnat se s tímto úkolem dokonale vyrovná.
Trochu jsme se rozptýlili, nyní se vracíme k našemu hlavnímu úkolu.
Vertikální zarovnání v kontejneru div
Bez ohledu na to, pro zarovnání v kontejneru div použijeme vlastnost svisle zarovnat. Jak jsem již řekl, tuto vlastnost lze využít v případě zarovnání inline prvků (tento případ jsme podrobně probrali výše a pro zarovnání v kontejneru div se nám nehodí); nezbývá než využít fakt, že svisle zarovnat funguje pro buňky tabulky.
Jak to můžeme použít? Nemáme stůl, pracujeme s kontejnerem div.
Ha, ukázalo se, že je to velmi jednoduché.
Vlastnost CSS zobrazit umožňuje přeměnit náš blok div na buňku tabulky, lze to provést snadno a přirozeně:
Řekněme, že máme třídu div zarovnání textu:
Blokovat obsahPro tento blok specifikujeme následující vlastnost CSS:
Textalign( display: table-cell; )
Tato instrukce CSS zázračně promění náš div v buňku tabulky, aniž by ji jakkoli vizuálně změnila. A pro buňku tabulky můžeme použít vlastnost svisle zarovnat plně a požadované vertikální zarovnání bude fungovat.
Všechno však nemůže skončit tak jednoduše. Máme skvělý prohlížeč IE. Neví, jak s majetkem pracovat displej: tabulka-buňka(Doporučuji, abyste si přečetli tabulku znázorňující funkčnost této vlastnosti CSS v různých prohlížečích na webu htmlbook.ru). Proto se budeme muset uchýlit k různým trikům.
Existuje mnoho způsobů, jak dosáhnout zarovnání v kontejneru div pro všechny prohlížeče:
- Metoda využívající další pomocný kontejner div
- Metoda využívající výraz. Je to spojeno se složitým výpočtem výšek bloků. Bez znalosti JavaScriptu to nemůžete udělat.
- Pomocí vlastnosti line-height. Tato metoda je vhodná pouze pro vertikální vyrovnání v bloku známé výšky, a proto není použitelná v obecném případě.
- Použití absolutního a relativního posunu obsahu v případě prohlížeče IE. Tato metoda se mi zdá nejsrozumitelnější a nejjednodušší. Navíc je implementovatelný pro kontejner div s proměnnou výškou. Budeme se mu věnovat podrobněji.
Jak jste pochopili, musíme jen vyřešit problém vertikálního zarovnání v IE, spojený s jeho nepochopením vlastnosti displej: tabulka-buňka(ani IE6, ani IE7, ani IE8 neznáme tuto vlastnost). Proto pomocí podmíněný komentář Speciálně pro prohlížeče IE specifikujeme různé vlastnosti CSS.
Podmíněný komentář
Typ konstrukce:
... Инструкции, действующие только в случае выполнения условия в квадратных скобках...
se nazývá podmíněný komentář (pozor, typ podmíněného komentáře musí až na mezeru zcela odpovídat uvedenému příkladu).
Pokyny obsažené v takovém podmíněném komentáři budou provedeny pouze v případě, že prohlížeč interpretující tento kód patří do rodiny IE.
Pomocí podmíněného komentáře tedy můžeme skrýt kus kódu ze všech prohlížečů kromě IE.
Řešení problému
Kvůli této petrželi budeme muset poskytnout našemu HTML kódu dva další kontejnery. Náš textový blok bude vypadat takto:
Toto je nějaký ověřovací text.
Skládá se ze dvou linek.Pro třídu kontejnerů div zarovnání textu Jsou nastaveny vlastnosti CSS, které zarovnávají jeho obsah vertikálně pro všechny běžné prohlížeče (samozřejmě kromě IE):
Displej: tabulka-buňka; svisle zarovnat: uprostřed;
A další dvě vlastnosti, které nastavují šířku a výšku bloku:
Šířka:500px; výška: 500px;
To stačí k zarovnání obsahu kontejneru na střed vzhledem k vertikále ve všech prohlížečích kromě IE.
Nyní začneme přidávat vlastnosti související se zarovnáním pro prohlížeče z rodiny IE(právě pro ně jsme použili další bloky div A rozpětí):
S odkazem na značku div uvnitř bloku třídy zarovnání textu. Chcete-li to provést, musíte nejprve uvést název třídy a poté, oddělený mezerou, značku, ke které přistupujeme.
Zarovnání textu div( pozice: absolutní; nahoře: 50 %; )
Tento návrh znamená: pro všechny tagy div uvnitř bloku s třídou zarovnání textu použít uvedené vlastnosti.
Podle toho styly určené pro blok zarovnání textu jsou upraveny:
Textalign( display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relativní; )
Nyní je levý horní bod textového bloku posunut dolů o 50 %.
Abych vysvětlil, co se děje, nakreslil jsem ilustraci:
Jak můžete vidět z obrázku, udělali jsme určitý pokrok. Ale to není vše! Levý horní bod žlutého bloku se skutečně posunul o 50 % dolů vzhledem k rodičovskému (fialovému) bloku. Ale potřebujeme padesát procent výšky fialového bloku střed žlutého bloku, nikoli jeho levý horní bod.
Nyní přijde na řadu tag rozpětí a jeho relativní umístění:
Rozpětí zarovnání textu ( pozice: relativní; nahoře: -50 %; )
Žlutý blok jsme tedy posunuli o 50 % jeho výšky vzhledem k jeho výchozí poloze. Jak víte, výška žlutého bloku se rovná výšce vystředěného obsahu. A poslední operace na span kontejneru umístila náš obsah doprostřed fialového bloku. Hurá!
Pojďme si trochu zahrát
Nejprve musíme skrýt petržel ze všech normálních prohlížečů a otevřít ji pro IE. To lze samozřejmě provést pomocí podmíněného komentáře, ne nadarmo jsme se s ním seznámili:
Je tu malý problém. Pokud je vycentrovaný obsah příliš vysoký, vede to k nepříjemným důsledkům: existuje další výška pro svislé posouvání.
Řešení: potřeba přidat vlastnost přepad: skrytý blok zarovnání textu.
Seznamte se s nemovitostí podrobně přetékat možné v .
Poslední CSS instrukce pro blok zarovnání textu má tvar:
Textalign( display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relativní; overflow: hidden; border: 1px full black; )
Omlouvám se, zapomněl jsem zmínit jednu důležitou věc. Pokud se pokusíte nastavte výšku bloku třídy zarovnání textu v procentech, pak máte nic nebude fungovat.
Centrování v bloku s proměnnou výškou
Velmi často je potřeba nastavit výšku bloku třídy zarovnání textu ne v pixelech, ale jako procento výšky nadřazeného bloku a zarovnejte obsah kontejneru div doprostřed.
Háček je v tom, že to není možné udělat pro buňku tabulky (ale blok třídy zarovnání textu se díky vlastnosti promění přesně v buňku tabulky displej: tabulka-buňka).
V tomto případě musíte použít externí blok, pro který je specifikována vlastnost CSS displej: tabulka a již pro něj nastavte procentuální hodnotu výšky. Pak se do něj vnořil blok s direktivou CSS displej: tabulka-buňka, šťastně zdědí výšku nadřazeného bloku.
Abychom v našem příkladu implementovali blok s proměnnou výškou, trochu upravíme CSS:
Do třídy zarovnání textu změníme hodnotu nemovitosti zobrazit S tabulka-buňka na tabulka a odstraňte direktivu zarovnání svisle zarovnat: na střed. Nyní můžeme bez obav změnit hodnotu výšky z 500 pixelů například na 100 %.
Tedy vlastnosti CSS pro blok třídy zarovnání textu bude vypadat takto:
Zarovnání textu ( zobrazení: tabulka; šířka: 500 pixelů; výška: 100 %; pozice: relativní; přetečení: skryté; ohraničení: 1 pixel plná černá; )
Zbývá pouze implementovat centrování obsahu. K tomu je kontejner div vnořený do bloku třídy zarovnání textu(jedná se o stejný žlutý blok na obrázku), je třeba nastavit vlastnost CSS displej: tabulka-buňka, pak zdědí výšku 100 % z nadřazeného bloku zarovnání textu(fialový blok). A nic nám nezabrání zarovnat obsah vnořeného kontejneru div ve středu s vlastností svisle zarovnat: na střed.
Získáme další další seznam vlastností CSS pro blok div vnořený v kontejneru zarovnání textu.
Textalign div( display: table-cell; vertical-align: middle; )
To je celý trik. V případě potřeby můžete mít proměnnou výšku s obsahem vycentrovaným.
Další informace o svislém vyrovnání bloku s proměnnou výškou viz .
