CSS: Vertikální zarovnání textu. Všechny způsoby vertikálního zarovnání v CSS

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.

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.

Štítky: Přidat štítky

Při vytváření bloků div jste pravděpodobně narazili na situace, kdy potřebujete vycentrovat div horizontálně a vertikálně pomocí čistého CSS. Například při vytváření vyskakovacích oken pomocí . Existuje několik způsobů, jak implementovat centrování, a v tomto článku se budu zabývat svými oblíbenými a nejjednoduššími způsoby pomocí CSS nebo jQuery.

Pro začátek, základy:

Horizontální centrování v CSS

To je snadné, používáme okraj pro naše div blok.

ClassName( margin:0 auto; width:200px; height:200px; )

Chcete-li vycentrovat blok div pouze vodorovně, musíte definovat šířku bloku (šířku), použijte vlastnost auto pro odsazení (okraj) vlevo a vpravo. Tato metoda bude fungovat pro všechny prvky bloku (div, p, h1 atd...). Chcete-li použít horizontální centrování pro vložené prvky (odkazy, obrázky...), musíte tuto možnost použít Zobrazit:blok;

Horizontální a vertikální centrování v CSS

Centrování bloku div vodorovně a svisle současně je trochu složitější. Musíte předem znát rozměry bloku div.

ClassName( šířka:300px; výška:200px; pozice:absolutně; vlevo:50%; nahoře:50%; okraj:-100px 0 0 -150px; )

Používáním absolutní polohování bloku, můžeme jej oddělit od okolních prvků a určit jeho polohu vzhledem k velikosti okna prohlížeče. Přesuňte blok div do 50% vlevo a nahoře v okně. Nyní je levý horní roh bloku uprostřed okna prohlížeče. Zbývá nastavit blok div do středu stránky jeho přesunutím polovinu jeho šířky doleva a polovinu její výšky nahoru. Hurá! Ukázalo se, že vynikající blokové centrování na čistý css kód.

Horizontální a vertikální centrování pomocí jQuery

Jak již bylo zmíněno, metoda centrování CSS funguje pouze s pevnými velikostmi. Pokud nejsou rozměry definovány, pomůže vám metoda jQuery:

$(window).resize(function()( $(".className").css(( position:"absolute", left: ($(window).width() - $(".className").outerWidth( ))/2, nahoře: ($(window).height() - $(".className").outerHeight())/2 )); )); // Spuštění funkce při načtení okna: $(window).resize();

Funkcí této metody je spustit funkci resize() pomocí řádku $(window).resize(). Tato funkce funguje při každé změně velikosti okna prohlížeče. Používáme vnější šířka() A vnějšíVýška() protože na rozdíl od šířka() A výška(), zahrnují výplň a tloušťku ohraničení ve velikosti, kterou vrátí. Poslední řádek zahájí proces centrování div při načítání stránky.

Výhodou použití této metody je, že nemusíte vědět, jak velký je div. Hlavní nevýhodou je, že funguje pouze tehdy, když je povolen JavaScript. Proto je tato metoda přijatelná pro multifunkční rozhraní, jako je Vkontakte, Facebook atd.

Každý, kdo se podílí na rozvržení, dříve nebo později čelí potřebě zarovnat prvky svisle... a ví, jaké potíže mohou nastat při zarovnání prvku na střed. CSS má vlastnost `vertical-align` s více hodnotami, které by logicky měly provádět vertikální zarovnání. V praxi to však nefunguje podle očekávání.

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

1. Zarovnání s tabulkou

V tomto případě nahrazujeme vnější blok tabulkou s jednou buňkou. Zarovnání bude aplikováno na obsah buňky, tedy vnitřní blok.

HTML

css

Vnější ( šířka : 200px ; výška : 200px ; zarovnání textu : na střed ; svislé zarovnání : na střed ; barva pozadí : #ffc ; )

Hlavní nevýhodou tohoto řešení z hlediska sémantiky je, že tabulka není používána k zamýšlenému účelu. Druhou nevýhodou je, že pro vytvoření tabulky je potřeba přidat kolem vnějšího bloku ještě jeden prvek.

První negativum lze částečně vrátit zpět nahrazením značek tabulky divs a nastavením režimu zobrazení tabulky v CSS.

HTML

css

Vnější obal ( display : table ; ) .uter ( display : table-cell ; )

2. Zarovnání s vycpávkou

Za předpokladu, že známe výšky vnitřních a vnějších bloků, lze zarovnání nastavit pomocí svislých odsazení vnitřního bloku podle vzorce: (H vnější - H vnitřní) / 2.

css

Vnější (výška: 200px;) .vnitřní (výška: 100px; okraj: 50px 0;)

Nevýhodou řešení je povinná znalost výšky obou bloků.

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

Pokud vnitřní blok nezabírá více než jeden řádek textu, můžete použít vlastnost line-height a nastavit ji na stejnou výšku vnějšího bloku. Vzhledem k tomu, že obsah vnitřního bloku by neměl jít do druhého řádku, je dobré přidat i skrytá pravidla: nowrap a overflow:.

css

Vnější ( výška : 200px ; výška řádku : 200 px ; ) .vnitřní ( white-space : nowrap ; přetečení : skryté ; )

Tuto metodu lze také použít k zarovnání víceřádkového textu. Chcete-li to provést, vnitřní blok musí přepsat hodnotu výšky řádku a přidat pravidla zobrazení: inline-block a vertical-align: middle .

css

Vnější (výška: 200px; výška-řádku: 200px;) .vnitřní (výška-řádku: normální; zobrazení: vložený blok; svislé zarovnání: na střed; )

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

4. Zarovnání s „roztažením“

Tuto metodu lze použít, když je nám známa výška vnitřního bloku, ale vnější ne.

K aplikaci této metody potřebujeme:

• Nastavte vnější blok na pozici: relativní a vnitřní blok na absolutní pozici: absolutní ;
• Přidejte do vnitřního bloku nějaká pravidla top: 0 a bottom: 0, v důsledku čehož se roztáhne na celou výšku vnějšího bloku;
• Nastavte vertikální výplň vnitřního bloku na auto .

css

Vnější (pozice: relativní;) .vnitřní (výška: 100px; poloha: absolutní; nahoře: 0; dole: 0; okraj: auto 0;)

5. Zarovnání se záporným horním okrajem

Podobně jako v předchozím případě se tato metoda používá, když není známa výška vnějšího bloku, ale je známa výška vnitřního bloku.

Musíte nastavit vnější blok na relativní umístění a vnitřní blok na absolutní umístění. Poté posuňte vnitřní krabici dolů o polovinu výšky horní části vnější krabice: 50 % a posuňte ji nahoru o polovinu její vlastní výšky margin-top: -H _vnitřní / 2 .

css

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

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

6. Zarovnání s transformací

Metodu lze použít, když výška vnitřní jednotky není známa. Musíte posunout vnitřní rámeček dolů o polovinu výšky horního okraje vnějšího rámečku: 50 % , poté použijte vlastnost transform a zvedněte jej zpět pomocí funkce translateY(-50%).

css

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

7. Zarovnání s pseudoprvkem

Jedná se o nejuniverzálnější metodu, kterou lze použít, když výšky obou bloků nejsou známy.

Podstatou metody je přidat inline blok o výšce 100 % dovnitř vnějšího bloku a nastavit jej na vertikální zarovnání. Výška přidaného bloku se tedy bude rovnat výšce vnějšího bloku. Vnitřní blok se zarovná svisle s ohledem na přidaný, a tedy i vnější blok.

Aby nedošlo k porušení sémantiky, je žádoucí přidat inline blok pomocí pseudoprvků před nebo za.

css

Outer :before ( display : inline-block ; height : 100 % ; vertical-align : middle ; content : "" ; ) .inner ( display : inline-block ; vertical-align : middle ; )

Nevýhodou této metody je, že ji nelze použít s absolutním umístěním vnitřní jednotky.

8. Zarovnání s Flexboxem

Nejmodernějším způsobem vertikálního zarovnání je použití flexibilního rozvržení krabice (nebo zkráceně Flexbox). Umožňuje flexibilně ovládat umístění prvků na stránce a umístit je téměř kamkoli. Zarovnání na střed pro Flexbox je velmi jednoduchý úkol.

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.