Způsoby vertikálního vycentrování v CSS. Horizontální a vertikální zarovnání prvků v CSS
Často je při rozvržení potřeba vertikální zarovnání textu v bloku. Pokud je to nutné provést v buňce tabulky, nastaví se hodnota vlastnosti CSS vertical-align.
Nabízí se však rozumná otázka, lze se obejít bez tabulky, aniž bychom přetěžovali označení stránky zbytečnými značkami? Odpověď je „můžete“, ale kvůli špatné podpoře CSS v MSIE se řešení problému bude lišit od řešení pro jiné běžné prohlížeče.
Jako příklad zvažte následující úryvek:
nějaký text
a pokuste se svisle zarovnat text na střed rámečku a na spodní část rámečku.
Řešení problému
"Správné" prohlížeče (včetně MSIE
Většina moderních prohlížečů podporuje CSS2.1, konkrétně hodnotu table-cell pro vlastnost display. To nám dává možnost vynutit zobrazení bloku s textem jako buňky tabulky a pomocí toho zarovnat text svisle:
div (
display:table-cell;
vertikální zarovnat: střed;
}
div (
display:table-cell;
svisle zarovnat: dole;
}
Internet Explorer (až do verze 7 včetně)
Chcete-li vyřešit problém zarovnání textu na spodní část bloku v MSIE, můžete použít absolutní umístění (zde potřebujeme inline prvek vnořený do bloku):
div (
poloha: relativní;
}
div span(
displej:blok;
pozice: absolutní;
dno: 0 %;
zbývá: 0 %
šířka: 100%
}
Tato sada pravidel funguje i ve „správných“ prohlížečích.
Zadejte vlastnosti
div span (
displej:blok;
šířka: 100%
}
nejsou vyžadovány, ale mohou být potřeba, pokud plánujete použít kromě svislého zarovnání textu také vodorovné zarovnání textu, například zarovnání textu: na střed ;.
Pro svislé zarovnání textu na střed bloku bude muset být původní fragment stále komplikovaný - uveďme ještě jeden vložený prvek:
Materiál ke studiu:
- Vertikální centrování v CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
- Vertikální centrování pomocí CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
- Svislé zarovnání (www.cssplay.co.uk/ie/valign.html)
- vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
- Další způsob vertikálního zarovnání v CSS (cssing.org.ua/2007/04/26/another-css-valign-method)
Vertikální zarovnání textu v CSS- velmi obtížná práce. Viděl jsem dost lidí, kteří se s tím potýkali, a stále nacházím "kritické" chyby, pokud jde o skutečný responzivní design.
Ale nebojte se: pokud se již potýkáte s vertikálním zarovnáním CSS, jste na správném místě.
Promluvme si o vlastnosti CSS vertical align
Když jsem poprvé začal pracovat v oblasti vývoje webu, trochu jsem s touto vlastností trpěl. Myslel jsem, že by to mělo fungovat jako klasická nemovitost “ zarovnání textu". Ach, kdyby to bylo tak snadné...
Vlastnost CSS vertical-align funguje dobře s tabulkami, ale ne s divy nebo jinými prvky. Když jej použijete na div , zarovná prvek s ostatními bloky, ale ne s jeho obsahem. V tomto případě vlastnost funguje pouze s display: inline-block; .
Viz příklad
Chceme vycentrovat obsah, ne samotný div!
Máte dvě možnosti. Pokud máte pouze prvky div s textem, můžete použít vlastnost line-height. To znamená, že potřebujete znát výšku prvku, ale nemůžete ji nastavit. Tímto způsobem bude váš text vždy uprostřed.
Pravdivost tohoto přístupu Vertikální zarovnání CSS je tu nevýhoda. Pokud je text víceřádkový, bude výška řádku vynásobena počtem řádků. S největší pravděpodobností v tomto případě skončíte s strašně navrženou stránkou.
Podívejte se na tento příklad
Pokud obsah, který chcete vycentrovat, je více než jeden řádek, pak je lepší použít tabulky divs. Můžete také použít tabulky, ale to není sémanticky správné. Pokud potřebujete přestávky pro účely reakce, je lepší použít prvky div.
Aby to fungovalo, musí existovat nadřazený kontejner s display: table a v něm požadovaný počet sloupců, které chcete vycentrovat s display: table-cell a vertical-align: middle .
Viz příklad
Proč to funguje s rozložením tabulky, ale ne s prvky div? Protože řádky v tabulce mají stejnou výšku. Když obsah buňky tabulky nevyužívá všechen dostupný výškový prostor, prohlížeč automaticky přidá svislé odsazení pro vystředění obsahu.
vlastnost pozice
Začněme základy vertikálního zarovnání div CSS:
- position: static je výchozí. Prvek je vykreslen podle pořadí HTML;
- poloha: absolutní - používá se k určení přesné polohy prvku. Tato pozice je vždy spojena s nejbližším relativně umístěným nadřazeným prvkem (ne statický). Pokud neurčíte přesnou polohu prvku, ztratíte nad ním kontrolu. Vykreslí se náhodně, zcela ignoruje tok dokumentu. Ve výchozím nastavení je prvek zobrazen v levém horním rohu;
- poloha: relativní - používá se k umístění prvku vzhledem k jeho normální (statické) poloze. Tato hodnota zachová pořadí toku dokumentu;
- poloha: pevná - používá se k umístění prvku vzhledem k oknu prohlížeče tak, aby se vždy zobrazil ve výřezu.
Poznámka: některé vlastnosti ( vrchol a z-index) fungují pouze v případě, že je prvek nastaven do polohy (not statický).
Pojďme pracovat!
Chcete implementovat CSS vertikální zarovnání na střed? Nejprve vytvořte prvek s relativní polohou a rozměry. Například: 100 % na šířku a výšku.
Druhý krok se může lišit v závislosti na cílových prohlížečích, ale lze použít jednu ze dvou možností:
- Stará vlastnost: Potřebujete znát přesnou velikost okna, abyste odstranili polovinu šířky a polovinu výšky. Viz příklad;
- Nová vlastnost CSS3: Můžete přidat vlastnost transform s hodnotou překladu 50 % a blok bude vždy uprostřed. Zobrazit příklad.
V zásadě, pokud chcete obsah vycentrovat, nikdy nepoužívejte horní: 40 % nebo vlevo: 300px . Na testovacích obrazovkách to funguje skvěle, ale není to centrování.
Zapamatovat polohu: pevná? Můžete s ním dělat totéž, co s absolutní pozicí, ale u rodičovského prvku nepotřebujete relativní pozici – vždy se bude umisťovat vzhledem k oknu prohlížeče.
Slyšeli jste o specifikaci flexboxu?
Můžete použít flexbox. Je to mnohem lepší než jakákoli jiná možnost. zarovnat text na střed svisle CSS. S flexboxem je správa prvků dětskou hrou. Problém je v tom, že některé prohlížeče jako IE9 a nižší je třeba vypustit. Zde je příklad, jak svisle vycentrovat blok:
Zobrazit příklad
Pomocí rozložení flexbox můžete vycentrovat více krabic.
Pokud použijete to, co jste se naučili z těchto příkladů, budete schopni to zvládnout CSS zarovnat blok vertikálně co nejdříve.
Odkazy a další čtení
Učení značek CSS
FlexBox Froggy
pískoviště flexbox
Překlad článku " Vertikální zarovnání CSS pro každého (včetně figurín)“ připravil přátelský projektový tým.
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é především k vytvoření vizuálního 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é je zpravidla flash-intro nebo obrázek vyjadřující hlavní myšlenku webu. Obrázek je zároveň odkazem na další sekce webu. Tento obrázek je nutné umístit do středu okna prohlížeče bez ohledu na rozlišení monitoru. K tomuto účelu můžete použít tabulku se šířkou a výškou rovnou 100 % (příklad 1).
Příklad 1: Vystředění obrázku
|
V tomto příkladu je vodorovné zarovnání nastaveno pomocí parametru tagu align="center".
Chcete-li nastavit výšku stolu na 100 %, odstraňte, kód již není platný.
Použití šířky a výšky pro celou dostupnou oblast 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.
Horní zarovnání
Chcete-li určit zarovnání obsahu buňky nahoru 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
Příklad 3: Použití stylů pro zarovnání
| Sloupec 1 | Sloupec 2 |
Ke zkrácení kódu používá tento příklad seskupení selektoru, 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ího se používá spodní.
Zarovnání na střed
Standardně je obsah buňky zarovnán na střed jejich svislice, takže v případě různých výšek sloupců je nutné nastavit zarovnání nahoru. 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.
V tomto případě je vzorec umístěn přesně ve středu okna prohlížeče a jeho číslo je na pravém okraji. Pro takové uspořádání prvků potřebujete tabulku se třemi buňkami. Vnější buňky by měly mít stejnou velikost, ve střední buňce se zarovnání provádí na střed a v pravé buňce - na pravém okraji (příklad 4). Tento počet buněk je nutný, aby bylo zajištěno, že vzorec bude vycentrován.
Příklad 4: Zarovnání vzorce
 |
(18.6) |
V tomto příkladu je první buňka tabulky ponechána prázdná, slouží pouze k vytvoření odsazení, které lze mimochodem nastavit i pomocí stylů.
Zarovnání formulářových prvků
Tabulky jsou užitečné pro umístění 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 znázorněna na Obr. 3.
Aby byl text v blízkosti polí formuláře zarovnán doprava a samotné prvky formuláře byly zarovnány doleva, potřebujete tabulku s neviditelným okrajem a dvěma sloupci. Levý sloupec bude obsahovat samotný text a pravý sloupec bude obsahovat textová pole (příklad 5).
Příklad 5 Zarovnání polí formuláře
V tomto příkladu byl pro buňky, které vyžadují zarovnání vpravo, přidán atribut align="right". Aby byl štítek "Komentář" umístěn na horním okraji víceřádkového textu, je odpovídající buňka nastavena na zarovnání shora pomocí atributu valign.
Při navrhování rozvržení webové stránky jste pravděpodobně narazili na situaci, kdy potřebujete pomocí CSS vycentrovat prvek div horizontálně a vertikálně. Existuje několik způsobů použití CSS a jQuery.
Nejprve ale základy:
Horizontální zarovnání s CSS
jméno třídy(
okraj:0 auto;
šířka:200px;
výška:200px;
}
Chcete-li prvek div vycentrovat pouze vodorovně, musíte zadat šířku a automatickou hodnotu pro levý a pravý okraj (toto je zkrácená forma psaní vlastností CSS). Tato metoda funguje na prvcích bloku (div, p, h1 atd.). Chcete-li jej použít na vložené prvky (jako jsou hypertextové odkazy a obrázky), musíte napsat další pravidlo - display:block .
Horizontální a vertikální zarovnání pomocí CSS
Současné vystředění divu vodorovně a svisle je trochu složitější. Předem musíte znát rozměry div.
jméno třídy(
šířka:300px;
výška:200px;
poloha:absolutní;
vlevo: 50 %;
horní: 50 %;
margin:-100px 0 0 -150px;
}
Při absolutním umístění prvku jej můžeme vytáhnout z toku a nastavit jeho polohu vzhledem k oknu prohlížeče. Nastavením posunu div na 50 % od levé a horní části okna vycentrujeme levý horní roh stránky. Jediné, co zbývá udělat, je posunout prvek div doleva a nahoru o polovinu jeho šířky a výšky se zápornými hodnotami okraje, aby byl dokonale vycentrován.
Horizontální a vertikální zarovnání pomocí jQuery
Jak bylo uvedeno, výše uvedená metoda CSS funguje pouze na divech s pevnou velikostí. jQuery přichází na záchranu:
// deklarace funkce:
$(window).resize(function()(
$(".název-třídy").css((
pozice: "absolutní",
vlevo: ($(window).width() - $(".class-name").outerWidth())/2,
nahoře: ($(window).height() - $(".class-name").outerHeight())/2
});
});
// volání funkce:
$(okno).resize();
Funkce vypočítá šířku okna v $(window).resize() vždy, když uživatel změní velikost okna. Používáme externalWidth() a externalHeight(), protože na rozdíl od běžných width() a height() přidávají výplň a šířku okraje a vracejí velikost. Nakonec se přizpůsobíme změně velikosti okna a vycentrujeme div při opětovném načtení stránky.
Zarovnání prvků na webové stránce nemusí být tak snadný úkol, zvláště pokud jde o vertikální zarovnání textu. Tato otázka se často vyskytuje na fórech a pro začínající uživatele je obzvláště obtížné tento problém vyřešit. Ale ve skutečnosti zde není nic složitého. Stačí jen malá znalost kaskádových stylů CSS. Protože se to vše děje na úkor jeho pravidel.
Vertikálního zarovnání textu lze dosáhnout alespoň pěti různými způsoby. Každý z nich je dobrý svým vlastním způsobem, s ohledem na okolnosti a podrobnosti situace. Podíváme se na pár příkladů a na základě podmínek si pro sebe vyberete vhodný porost.
První metoda s výškou řádku
První metoda je velmi banální a má velkou nevýhodu, která omezuje její použití. Ale přesto, ať už někdo říká cokoli, může to být užitečné a dokonce přinést požadovaný výsledek. Toto bude podmíněné zarovnání, protože v podstatě nastavujeme výšku řádku tak, aby odpovídala výšce bloku pomocí vlastnosti line-height.
první příklad. demo #1
první příklad. demo #1
/* #1 */ .talign1( okraj: 1px plná červená; výška:200px;/* výška bloku */ ) .talign1 > p( výška-řádku:200px;/* nastavit výšku řádku tak, aby odpovídala výšce bloku */ okraj : 0;/* odstranit vnější odsazení, pokud existuje */ text-align:center;/* zarovnat text vodorovně na střed */ padding: 0;/* odstranit odsazení, pokud existuje */ ) /* konec # 1*/
Úplně stejným způsobem je možné implementovat obrázek do středu svislice, ale přidáním jedné nové vlastnosti vertical-align: middle; .
Příklad. Demo #2
Příklad. Demo #2/* #2 */ .talign2( ohraničení: 1px plná červená; výška řádku:200px;/* výška řádku bloku */ ) .talign2 div( text-align:center;/* zarovnat prvky vodorovně na střed */ ) .talign2 img( vertical-align:middle;/* zarovnat obrázky svisle na střed */ okraj: 1px plná černá; ) /* konec #2*/
Zarovnání s vlastností position
Tato metoda je široce používána v mnoha úlohách CSS, včetně naší úlohy. Nutno ale podotknout, že není úplně dokonalý a má své vedlejší účinky. Je to proto, že centrování prvku, vyjádřené v procentech, bude centrováno na levý horní okraj vnitřního rámečku.
Proto musíte nastavit zápornou hodnotu pro okraje. Vycpávka nahoře by měla mít polovinu výšky vnitřního bloku a vycpávka vlevo by měla mít polovinu šířky. Dostaneme tak absolutní střed.
V této variantě je snad povinné znát přesnou výšku a šířku podřízeného prvku. Jinak může dojít k nesprávnému vystředění.
/* #3 */ .talign3( okraj: 1px plná červená; výška:200px;/* výška bloku */ pozice: relativní; ) .talign3 div( pozice: absolutní; nahoře: 50 %; vlevo: 50 %; výška: 30 %; šířka: 50 %; okraj: -5 % 0 0 -25 %; okraj: 1px plná černá; ) /* konec #3*/
Zarovnání s vlastností tabulky
Zde používáme starou techniku, přeměňujeme prvky na tabulku s buňkami. V tomto případě tabulky tagy