Zarovnat div na střed css. Horizontální zarovnání. Chceme vycentrovat obsah, ne samotný div

Existuje několik zásadně odlišných způsobů, jak svisle vycentrovat objekt pomocí CSS, ale vybrat ten správný může být složité. Na některé z nich se podíváme a na základě získaných znalostí také vytvoříme malý web.

Pomocí CSS není snadné dosáhnout vertikálního zarovnání na střed. Existuje mnoho způsobů a ne všechny fungují ve všech prohlížečích. Podívejme se na 5 různých metod a na výhody a nevýhody každé z nich. Příklad.

1. způsob

Tato metoda předpokládá, že nastavíme nějaký prvek, který se má zobrazit jako tabulku, a pak na něj můžeme použít vlastnost vertical-align (která v různých prvcích funguje jinak).

Některé užitečné informace, které by měly být centrálně umístěny.

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

• Pros
• Obsah může dynamicky měnit výšku (výška není definována v CSS).

Obsah není oříznut, pokud pro něj není dostatek místa.

• Nevýhody
• Nefunguje v IE 7 nebo méně

Spousta vnořených značek

2. způsob

Tato metoda používá absolutní umístění prvku div, přičemž horní část je nastavena na 50 % a horní okraj je snížen o polovinu výšky obsahu. To znamená, že objekt musí mít pevnou výšku, která je definována v CSS stylech.

Protože je výška pevná, můžete nastavit overflow:auto; u prvku div obsahujícího obsah se tedy, pokud se obsah nevejde, zobrazí posuvníky.

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

• Obsah zde #content ( pozice: absolutní; nahoře: 50 %; výška: 240 pixelů; margin-top: -120 pixelů; /* mínus polovina výšky */ )
• Funguje ve všech prohlížečích.

Obsah není oříznut, pokud pro něj není dostatek místa.

• Nedochází ke zbytečnému hnízdění.

Když není dostatek místa, obsah zmizí (například div je uvnitř těla a uživatel zmenšil okna, v takovém případě se posuvníky nezobrazí.

3. způsob

Při této metodě obalíme obsahový div jiným div. Nastavíme jeho výšku na 50 % (výška: 50 %;) a spodní okraj na polovinu výšky (margin-bottom:-contentheight;). Obsah bude plavat a bude vycentrován.

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

• Obsah zde #content ( pozice: absolutní; nahoře: 50 %; výška: 240 pixelů; margin-top: -120 pixelů; /* mínus polovina výšky */ )
• Při nedostatku místa (například při zmenšení okna) není obsah oříznut, objeví se posuvníky.

Obsah není oříznut, pokud pro něj není dostatek místa.

• Napadá mě jen jedna věc: že se používá další prázdný prvek.

4. metoda.

Tato metoda používá vlastnost position:absolute; pro div s pevnými rozměry (šířka a výška). Poté nastavíme jeho souřadnice top:0; dole:0; , ale protože má pevnou výšku, nemůže se natáhnout a je zarovnaný na střed. To je velmi podobné známé metodě horizontálního centrování prvku bloku s pevnou šířkou (margin: 0 auto;).

Důležité informace.

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

• #content( pozice: absolutní; nahoře: 0; dole: 0; vlevo: 0; vpravo: 0; okraj: auto; výška: 240px; šířka: 70 %; )

Obsah není oříznut, pokud pro něj není dostatek místa.

• Velmi jednoduché.
• Nefunguje v Internet Exploreru

Pokud v kontejneru není dostatek místa, obsah bude oříznut bez posuvníků.

5. metoda

Pomocí této metody můžete zarovnat jeden řádek textu na střed. Jednoduše nastavíme výšku textu (line-height) rovnou výšce prvku (height). Poté se čára zobrazí uprostřed.

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

• Obsah zde #content ( pozice: absolutní; nahoře: 50 %; výška: 240 pixelů; margin-top: -120 pixelů; /* mínus polovina výšky */ )
• Nějaký řádek textu #content( height: 100px; line-height: 100px; )

Obsah není oříznut, pokud pro něj není dostatek místa.

• Neořízne text, pokud se nevejde.
• Funguje pouze s textem (nepracuje s prvky bloku).

Pokud je tam více než jeden řádek textu, vypadá to velmi špatně.

Tato metoda je velmi užitečná pro malé prvky, jako je centrování textu v tlačítku nebo textovém poli.

Nyní víte, jak dosáhnout vertikálního zarovnání na střed, pojďme vytvořit jednoduchý web, který bude nakonec vypadat takto:

Krok 1

• Vždy je dobré začít sémantickým značením. Naše stránka bude mít následující strukturu:
• #floater (na střed obsahu)
  • #centred (centrální prvek)
    • #strana
    • #logo
    • #nav (seznam
  • #obsah

  #bottom (pro autorská práva a vše ostatní)

  Napišme následující html označení:

  • Středověká společnost Společnost
  • Domov
  • Produkty
  • Blog
  • Kontakt
  O

  Název stránky

  Holisticky přepracujte outsourcing s přidanou hodnotou po spolupráci zaměřené na procesy a sdílení nápadů.

  Efektivně přijměte přizpůsobenou webovou připravenost spíše než procesy řízené zákazníky. Asertivně zvyšujte požadavky napříč platformami ve vztahu k proaktivním technologiím. Pohodlně posilujte multidisciplinární metaslužby bez celopodnikových rozhraní.

  Pohodlně zefektivněte konkurenční strategické tematické oblasti pomocí zaměřených elektronických trhů. Fosfluorescenčně syndikujte komunity světové třídy vis-a-vis s trhy s přidanou hodnotou. Vhodně znovu objevte holistické služby před robustními elektronickými službami.

  Upozornění na autorská práva je zde

  Krok 2

  Nyní napíšeme nejjednodušší CSS pro umístění prvků na stránku. Tento kód byste měli uložit do souboru style.css. Právě na to je odkaz zapsán v html souboru.

  Html, tělo ( okraj: 0; odsazení: 0; výška: 100 %; ) tělo ( pozadí: url("page_bg.jpg") 50 % 50 % bez opakování #FC3; rodina písem: Georgia, Times, patky; ) #floater ( pozice: relativní; plovoucí: vlevo; výška: 50 %; margin-bottom: -200px; width: 1px; ) #centered ( pozice: relativní; jasná: vlevo; výška: 400px; šířka: 80 %; max. -width: 800px; min-width: 0 auto; border: 4px solid #666; #bottom ( position: absolute; bottom: 0; right: 0; ) #nav ( position: absolute; left: 0; spodní: 20px; přetečení: 20px;

  Před zarovnáním našeho obsahového centra musíme nastavit výšku těla a html na 100 %. Vzhledem k tomu, že výška se počítá bez vnitřního a vnějšího odsazení (padding a margin), nastavíme je (padding) na 0, aby nebyly žádné posuvníky.

  Spodní okraj prvku „floater“ se rovná mínus polovině výšky obsahu (400px), konkrétně -200px ;

  

  Vaše stránka by nyní měla vypadat nějak takto:

  Protože prvek #centered má nastaveno position:relative, můžeme použít absolutní umístění prvků v něm. Poté nastavte overflow:auto; pro prvek #content, aby se v případě, že se obsah nevejde, zobrazily posuvníky.

  Krok 3

  Poslední věc, kterou uděláme, je přidat nějaký styl, aby stránka vypadala trochu atraktivněji. Začněme jídelníčkem.

  #nav ul ( styl seznamu: žádný; odsazení: 0; okraj: 20px 0 0 0; odsazení textu: 0; ) #nav li ( odsazení: 0; okraj: 3px; ) #nav li a ( zobrazení: blok; background-color: #e8e8e8; margin: 0; border-bottom: 1px solid: right; obsah: """; font-weight: bold; float: right; margin: 0 2px 0 5px; f8f8f8; border-bottom-color; : #777; ) #nav li a:hover::after ( margin: 0 0 0 7px; barva: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )

  První věc, kterou jsme udělali, aby nabídka vypadala lépe, bylo odstranění odrážek nastavením atributu list-style:none a také nastavení padding a padding, protože se ve výchozím nastavení v různých prohlížečích značně liší.

  Všimněte si, že jsme pak určili, že odkazy by měly být vykresleny jako prvky bloku. Nyní jsou při zobrazení roztaženy přes celou šířku prvku, ve kterém se nacházejí.

  Další zajímavou věcí, kterou jsme použili pro menu, jsou pseudotřídy:před a:po. Umožňují vám přidat něco před a za prvek. Je to dobrý způsob, jak přidat ikony nebo symboly, jako je šipka na konec každého odkazu. Tento trik nefunguje v aplikaci Internet Explorer 7 a nižší.

  

  Krok 4

  A v neposlední řadě do našeho návrhu přidáme nějaké šroubky pro ještě větší krásu.

  #centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( rodina písem: Helvetica, Arial, sans- serif; font-weight: normal; ) h1 ( barva: #f93; border-bottom: 1px solid #ddd; letter-spacing: -0.05em; font-weight: bold; margin-top: 0; padding-top: 0; ) #bottom ( padding: 10px; font-size: 0,7em; color: #f03; ) #logo (font-size: 2em; text-align: center; color: #999; ) #logo silné ( font-weight: normal; ) #logo span ( display: block; font-size: 4em; line-height: 0.7em; color: #666; ) p, h2, h3 ( line-height: 1.6em; ) a ( barva: #f03; )

  V těchto stylech nastavujeme zaoblené rohy pro prvek #centered. V CSS3 to bude provedeno pomocí vlastnosti border-radius. To ještě není implementováno v některých prohlížečích, kromě použití předpon -moz a -webkit pro Mozilla Firefox a Safari/Webkit.

  

  Kompatibilita

  Jak jste již pravděpodobně uhodli, hlavním zdrojem problémů s kompatibilitou je Internet Explorer:

  • Prvek #floater musí mít nastavenou šířku
  • IE 6 má extra vycpávky kolem nabídek

  Velmi často je v layoutu nutné vycentrovat nějaký prvek horizontálně a/nebo vertikálně. Proto jsem se rozhodl udělat článek s různými způsoby centrování, aby bylo vše po ruce na jednom místě.

  Okraj vodorovného zarovnání: auto

  Horizontální zarovnání pomocí okraje se používá, když je známa šířka vystředěného prvku. Funguje pro blokové prvky:

  Prvek (levý okraj: auto; pravý okraj: auto; šířka: 50 %; )

  Zadáním auto pro pravý a levý okraj se srovnají, což vystředí prvek vodorovně v rámci nadřazeného bloku.

  zarovnání textu: na střed

  Tato metoda je vhodná pro centrování textu v bloku. zarovnání textu: na střed:

  Zarovnání pomocí .wrapper zarovnání textu ( text-align: center; )

  Jsem zarovnaný na střed

  pozici a záporný okraj vlevo

  Vhodné pro centrovací bloky známé šířky. Udáváme pozici nadřazeného bloku: vzhledem k poloze vzhledem k němu, polohu prvku na střed: absolutní , vlevo: 50 % a záporný okraj vlevo, jehož hodnota se rovná polovině šířky prvku:

  Zarovnání s pozicí .wrapper ( pozice: relativní; ) .wrapper p ( vlevo: 50 %; okraj: 0 0 0 -100px; pozice: absolutní; šířka: 200px; )

  Jsem zarovnaný na střed

  zobrazení: inline-block + text-align: center

  Metoda je vhodná pro zarovnání bloků neznámé šířky, ale vyžaduje rodiče obalu. Horizontální nabídku můžete například vycentrovat takto:

  Zarovnání s displejem: inline-block + text-align: center;

  • Domov
  • .navigation ( text-align: center; ) .navigation li ( display: inline-block; )
  O autorovi

  Vertikální zarovnání - 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.

  line-height .wrapper ( výška: 100px; line-height: 100px; )

  Jsem svisle vyrovnaný

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

  Wrapper ( pozice: relativní; ) prvek ( výška: 200px; okraj: -100px 0 0; pozice: absolutní; nahoře: 50 %; )

  Tímto způsobem můžete pomocí umístění a záporných okrajů vycentrovat prvek na stránce.

  displej: tabulka-buňka

  Pro vertikální zarovnání je na prvek aplikována vlastnost display: table-cell, což jej nutí emulovat buňku tabulky. Nastavíme také jeho výšku a vertical-align: middle . Zabalme to vše do kontejneru s vlastností dislpay: table; :

  Vertikální zarovnání zobrazení: table-cell .wrapper ( display: table; width: 100%; ) .cell ( display: table-cell; height: 100px; vertical-align: middle; )

  line-height .wrapper ( výška: 100px; line-height: 100px; )

  Dynamické zarovnání prvku na stránce

  Podívali jsme se na způsoby, jak zarovnat prvky na stránce pomocí CSS. Nyní se podívejme na implementaci jQuery.

  Pojďme připojit jQuery ke stránce:

  Navrhuji napsat jednoduchou funkci pro vycentrování prvku na stránce, nazvěme ji alignCenter() . Samotný prvek funguje jako argument funkce:

  Funkce alignCenter(elem) ( // kód zde )

  V těle funkce dynamicky vypočítáme a přiřadíme souřadnice středu stránky vlastnostem CSS left a top:

  Funkce alignCenter(elem) ( elem.css(( vlevo: ($(window).width() - elem.width()) / 2 + "px", nahoře: ($(window).height() - el. height()) / 2 + "px" // nezapomeňte k prvku přidat position: absolute pro spuštění souřadnic )) )

  V prvním řádku funkce získáme šířku dokumentu a odečteme od ní šířku prvku rozdělenou na polovinu - to bude vodorovný střed stránky. Druhý řádek dělá totéž, pouze s výškou pro vertikální zarovnání.

  Funkce je připravena, zbývá ji pouze připojit k událostem připravenosti DOM a změně velikosti okna:

  $(function() ( // volání funkce centrování, když je DOM připraven alignCenter($(elem)); // volání funkce při změně velikosti okna $(window).resize(function() ( alignCenter($(elem) )); )) // funkce centrování prvku alignCenter(elem) ( elem.css(( // výpočet souřadnic vlevo a nahoře vlevo: ($(window).width() - elem.width()) / 2 + " px", top: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

  Aplikace Flexboxu

  Nové funkce CSS3, jako je Flexbox, se postupně stávají běžnými. Tato technologie pomáhá vytvářet značky bez použití plováků, polohování atd. Lze jej také použít k vystředění prvků. Například použijte Flexbox na nadřazený element.wrapper a vycentrujte obsah uvnitř:

  Wrapper ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; výška: 500px; šířka: 500px; ) .wrapper .content ( okraj: auto; /* okraj: 0 pouze vodorovný */ /* okraj: pouze svislý */ ) Lorem ipsum dolor sit amet

  Toto pravidlo vycentruje prvek vodorovně i svisle zároveň - margin nyní funguje nejen pro horizontální zarovnání, ale i pro vertikální. A bez známé šířky/výšky.

  Související zdroje Pomozte projektu

  Ahoj! Pokračujeme v zvládnutí základů jazyka HTML. Podívejme se, co musíte napsat, abyste zarovnali text na střed, šířku nebo okraje.

  Když se pustíme do práce, podívejme se, jak vycentrovat text v HTML třemi různými způsoby. Poslední dva jsou propojeny přímo se šablonou stylů. Může to být soubor CSS, který se připojuje ke stránkám webu a definuje jejich vzhled.

  Metoda 1 - přímá práce s HTML

  Je to vlastně docela jednoduché. Viz příklad níže.

  Zarovnejte odstavec na střed.

  Pokud potřebujete přesunout fragmenty textu jiným způsobem, zadejte místo parametru „centrum“ následující hodnoty:

  • zarovnat – zarovná text na šířku stránky;
  • vpravo – na pravém okraji;
  • doleva - doleva.

  Analogicky můžete přesunout obsah, který je v záhlaví (h1, h2) a kontejneru (div).

  Metoda 2 a 3 - pomocí stylů

  Výše uvedený design lze mírně změnit. Efekt bude stejný. Chcete-li to provést, musíte napsat níže uvedený kód.

  Textový blok.

  V této podobě je kód zapsán přímo do HTML, aby se textový obsah vycentroval.

  Existuje další alternativní způsob, jak dosáhnout výsledků. Budete muset provést několik kroků.

  Krok 1. Do hlavního kódu napište

  Textový materiál.

  Krok 2. Do přiloženého souboru CSS zadejte následující kód:

  Rovno (text-align:center;)

  Podotýkám, že slovo „rovno“ je jen název třídy, kterou lze nazvat jinak. To je ponecháno na uvážení programátora.

  Analogicky v HTML můžete snadno zarovnat text na střed, zarovnat a zarovnat k pravému nebo levému okraji stránky. Jak vidíte, existuje daleko více možností, jak dosáhnout svého cíle.

  Jen pár otázek:

  • Děláte informační neziskový projekt?
  • Chcete, aby se vaše webové stránky dobře umisťovaly ve vyhledávačích?
  • Chcete si vydělávat online?

  Pokud jsou všechny odpovědi kladné, podívejte se na integrovaný přístup k vývoji webových stránek. Informace budou užitečné zejména v případě, že běží na WordPress CMS.

  Upozorňuji, že vlastní webové stránky jsou jen jednou z mnoha možností, jak generovat pasivní či aktivní příjem na internetu. Můj blog je věnován finančním příležitostem online.

  Pracovali jste někdy v oblasti dopravní arbitráže, copywritingu nebo jiných oblastech činnosti, které generují primární nebo doplňkový příjem prostřednictvím spolupráce na dálku? O tom a mnohem více se můžete dozvědět právě teď na stránkách mého blogu.

  V budoucnu zveřejním spoustu opravdu užitečných informací. Zůstaňte ve spojení. Pokud si přejete, můžete se přihlásit k odběru aktualizací Workip e-mailem. Formulář předplatného je umístěn níže.

  Vertikální zarovnání textu v CSS je docela ošemetná práce. Viděl jsem dost lidí, kteří s tím bojují, že neustá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ě.

  Pojďme se bavit o vlastnosti CSS vertical align

  Když jsem se poprvé začal věnovat vývoji webu, trochu jsem s touto vlastností bojoval. Myslel jsem, že by to mělo fungovat jako klasická vlastnost „text-align“. Ach, kdyby bylo všechno tak jednoduché...

  Vlastnost CSS vertical-align funguje dobře s tabulkami, ale ne s prvky div nebo jinými prvky. Když jej použijete na div, zarovná prvek vzhledem k ostatním div, ale ne jeho obsah. 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.

  Tento přístup k vertikálnímu zarovnání CSS má však nevýhodu. 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ě rozloženou stránkou.

  Podívejte se na tento příklad

  Pokud obsah, který chcete vycentrovat, sestává z více než jednoho řádku, 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 pomocí display: table-cell a vertical-align: middle .

  Viz příklad

  Proč to funguje s označ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 se vždy vztahuje k nejbližšímu relativně umístěnému rodičovskému prvku (nikoli statickému ). Pokud neurčíte přesnou polohu prvku, ztratíte nad ním kontrolu. Zobrazí se náhodně a zcela ignoruje tok dokumentu. Ve výchozím nastavení se prvek zobrazuje v levém horním rohu;
  • poloha: relativní - používá se k umístění prvku vzhledem k jeho normální poloze (statické). Tato hodnota zachová pořadí toku dokumentu;
  • poloha: pevná - používá se k umístění prvku vzhledem k oknu prohlížeče, aby byl vždy viditelný ve výřezu.

  Poznámka: Některé vlastnosti (top a z-index) fungují pouze v případě, že je prvek nastaven na pozici (nikoli static ).

  Pojďme na věc!

  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 můžete 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. Podívejte se na 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 top: 40% nebo left: 300px . Na testovacích obrazovkách to funguje dobře, ale není to vycentrované.

  Zapamatovat polohu: pevná? Můžete s ním dělat totéž, co s absolutní pozicí, ale u nadřazeného prvku nepotřebujete relativní pozici – bude vždy umístěn relativně k oknu prohlížeče.

  Slyšeli jste o specifikaci flexboxu?

  Můžete použít flexbox. To je mnohem lepší než jakákoli jiná možnost zarovnání textu CSS svisle na střed. S flexboxem je správa prvků jako dětská hra. Problém je v tom, že musíte zrušit některé prohlížeče, jako je IE9 a verze níže. Zde je příklad, jak svisle vycentrovat blok:

  Zobrazit příklad

  Pomocí rozvržení flexbox můžete vycentrovat více bloků.

  Pokud použijete to, co jste se naučili z těchto příkladů, budete schopni zvládnout vertikální zarovnání bloků CSS během okamžiku.

  Odkazy a další čtení

  Učení značek CSS

  FlexBox Froggy

  Pískoviště Flexbox

  Překlad článku „CSS Vertical Align for Everyone (Dummies Included)“ připravil přátelský projektový tým.

  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 vertical-align.

  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).

  Problém: Je nutné zarovnat obsah bloku s proměnnou výškou na střed vzhledem k vertikále.

  Nyní začneme problém řešit.

  A tak máme blok, jeho výška se může změnit:

  Blokovat obsah

  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: A tak máme blok, jeho výška se může změnit: Existují všechny důvody se domnívat, že fráze

  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:

  Vítá vás kousek textu!

  Akce blokové značky 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 vertical-align 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 použijeme vlastnost vertical-align pro zarovnání v kontejneru div. 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 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 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 display nám umožňuje přeměnit náš blok div na buňku tabulky, což lze provést snadno a přirozeně:

  Řekněme, že máme třídu div zarovnání textu:

  A tak máme blok, jeho výška se může změnit:

  Pro tento blok specifikujeme následující vlastnost CSS:

  Textalign( display: table-cell; )

  Tato CSS instrukce 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 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 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 nesprávným pochopením vlastnosti displej: tabulka-buňka(ani IE6, ani IE7, ani IE8 tuto vlastnost nezná). Proto pomocí podmíněného komentáře speciálně pro prohlížeče z rodiny IE označíme další vlastnosti CSS.

  Podmíněný komentář

  Typ konstrukce:

  ... Pokyny, které platí pouze v případě, že podmínka v hranatých závorkách platí...

  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; vertikální zarovnat: střed;

  A další dvě vlastnosti, které nastavují šířku a výšku bloku:

  Šířka:500px; výška: 500px;

  To stačí k vertikálnímu zarovnání obsahu kontejneru 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šechno! Levý horní bod žlutého bloku se skutečně posunul o 50 % dolů vzhledem k rodičovskému (fialovému) bloku. Ale potřebujeme, aby padesát procent výšky fialového bloku bylo středem žlutého bloku a ne jeho levým horním bodem.

  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 trochu podvádě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:

  .textalign div( pozice: absolutní; nahoře: 50 %; ) .textalign span( pozice: relativní; nahoře: -50 %; )

  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í problému: musíte přidat vlastnost přepad: skrytý blok

  zarovnání textu. Seznamte se s nemovitostí podrobně přetékat

  možné v . zarovnání textu Poslední CSS instrukce pro blok

  má tvar:

  Textalign( display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relativní; overflow: hidden; border: 1px full black; ) zarovnání textu Omlouvám se, zapomněl jsem zmínit jednu důležitou věc. Pokud se pokusíte nastavit výšku bloku třídy

  v procentech, tak ti nic nevyjde.

  Centrování v bloku s proměnnou výškou zarovnání textu Velmi často je potřeba nastavit výšku bloku třídy

  ne v pixelech, ale jako procento výšky nadřazeného bloku a zarovnejte obsah kontejneru div doprostřed. zarovnání textu Háček je v tom, že to není možné udělat pro buňku tabulky (ale blok třídy 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 se díky vlastnosti promění přesně v buňku tabulky a již pro něj nastavte procentuální hodnotu výšky. Pak se do něj vnořil blok s direktivou CSS

  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 se díky vlastnosti promění přesně v buňku tabulky, 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 .