, je plovák.
Syntaxe vlastnosti:
plovák: vlevo | vpravo | žádný | zdědit,
Kde:

• vlevo - zarovná prvek k levému okraji obrazovky. Zbytek prvků se zalomí doprava;
• vpravo - zarovnání vpravo, obalování zbytku prvků - vlevo;
• žádné - není povoleno balení;
• dědit - převezme hodnotu nadřazeného prvku.

Zvažte odlehčený příklad umístění divů pomocí této vlastnosti:

Nyní zkusme použít stejnou vlastnost k umístění třetího prvku div do středu stránky. Ale bohužel float nemá středovou hodnotu. A když je novému bloku přiřazena hodnota zarovnání doprava nebo doleva, posune se v určeném směru. Zbývá tedy pouze nastavit všechny tři bloky jako plovoucí: left :

Ale ani to není nejlepší varianta. Při zmenšení okna se všechny vrstvy svisle seřadí do jedné řady a při zvětšení se přilepí k levému okraji okna. Takže potřebujeme lepší způsob, jak vycentrovat divy.

Centrování vrstev

V následujícím příkladu použijeme kontejnerovou vrstvu k umístění zbytku prvků. Tím je vyřešen problém vzájemného posouvání bloků při změně velikosti okna. Centrování kontejneru na střed se provádí nastavením vlastností okraje na nulu pro okraje shora a auto po stranách (margin: 0 auto ):

Stejný příklad ukazuje, jak můžete prvek div vycentrovat vodorovně. A pokud mírně upravíte výše uvedený kód, můžete dosáhnout vertikálního zarovnání bloků. K tomu stačí změnit délku vrstvy kontejneru (zmenšit ji). To znamená, že po úpravě css by třída měla vypadat takto:

Po změně se všechny bloky seřadí přesně do řady uprostřed. A jejich poloha se nezmění při jakékoli velikosti okna prohlížeče. Takto vypadá div se středem svisle:

V následujícím příkladu jsme použili řadu nových vlastností css k vystředění vrstev uvnitř kontejneru:

Stručný popis vlastností css a jejich hodnot, které jsme v tomto příkladu použili k vycentrování prvku div uvnitř prvku div:

• display: inline-block - seřadí prvek bloku do řádku a obalí jej jiným prvkem;
• vertical-align: middle - zarovná prvek na střed vzhledem k nadřazenému prvku;
• margin-left - nastaví okraj doleva.

Jak vytvořit odkaz z vrstvy

Jakkoli to zní divně, je to možné. Někdy může být při rozvržení různých typů nabídek potřeba blok div jako odkaz. Zvažte praktický příklad implementace odkazové vrstvy:

V tomto příkladu pomocí řádku zobrazení: blok nastavíme odkaz na hodnotu prvku bloku. A aby se celá výška prvku div stala odkazem, nastavte výšku : 100 %.

Skrytí a zobrazení prvků bloku

Blokové prvky poskytují více možností pro rozšíření funkčnosti rozhraní než zastaralé tabulkové uspořádání. Často se stává, že design stránek je jedinečný a rozpoznatelný. Za takový exkluzivní nedostatek volného místa si ale musíte zaplatit.

To platí zejména pro hlavní stránku, na které jsou náklady na inzerci nejvyšší. Nastává tedy problém, kam „strčit“ další reklamní banner. A tady vám nic neprojde zarovnáním divu na střed stránky!

Racionálnějším řešením je skrýt nějaký blok. Zde je jednoduchý příklad takové implementace:

V tomto příkladu se pozice bloků div žádným způsobem nemění. Zde používáme nejjednodušší JavaScriptovou funkci, která změní hodnotu vlastnosti css display po kliknutí na tlačítko ( událost onclick).

Syntaxe zobrazení:
displej:blok | inline | inline blok | vložená tabulka | položka seznamu | žádný | záběh | stůl | popisek tabulky | buňka tabulky | tabulka-sloupec-skupina | sloupec tabulky | table-footer-group | table-header-group | řádek tabulky | tabulka-řádek-skupina

Jak vidíte, tato vlastnost může nabývat mnoha hodnot. Proto je velmi užitečný a lze jej použít k umístění prvků. V jednom z předchozích příkladů pomocí jedné z jeho hodnot ( inline blok) jsme implementovali zarovnání prvku div uvnitř prvku div ve středu.

Pro skrytí a zobrazení vrstvy jsme použili dvě hodnoty pro vlastnost display.

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.

Obecně platí, že centrování prvků HTML na stránce není obtížný úkol. V některých případech... si weboví vývojáři musí dát hlavu do hlavy, aby našli to nejlepší řešení.

Centrovat prvky horizontálně není tak těžké, vertikálně už vyvolává otázky, ale jejich kombinování obecně může být matoucí. V éře responzivního designu málokdy známe přesné rozměry určitých prvků. Napočítal jsem 6 různých způsobů centrování prvků pomocí CSS. Začněme jednoduchými příklady a skončeme složitějšími. Bude fungovat se stejným HTML kódem:

Horizontální centrování se zarovnáním textu

Někdy je to nejjednodušší řešení nejlepší:

Div.center ( zarovnání textu: na střed; pozadí: hsl(0, 100 %, 97 %); ) div.center img ( šířka: 33 %; výška: auto; )

Není zde žádné vertikální centrování: k tomu budete muset přidat vlastnost margin-top a margin-bottom do prvku div.

Centrování s okrajem: auto

Další řešení pro horizontální centrování:

Div.center ( pozadí: hsl(60, 100 %, 97 %); ) div.center img ( displej: blok; šířka: 33 %; výška: auto; okraj: 0 auto; )

Všimněte si, že pro tuto metodu musíte nastavit vlastnost display: block.

Centrování s buňkou stolu

Pomocí display: table-cell zajistíme, aby byl prvek vycentrován jak svisle, tak vodorovně. Zde ale musíme obrázek vnořit do jiného prvku div.

Zarovnáno na střed ( display: table; background: hsl(120, 100%, 97%); width: 100%; ) .center-core ( display: table-cell; text-align: center; vertical-align: middle; ) .center-core img ( šířka: 33 %; výška: auto; )

Aby vše fungovalo správně, je třeba nastavit div na šířku: 100 %. Pro vertikální vystředění prvku použijeme standardní metody nastavením výšky. Funguje všude, včetně IE8+.

Absolutní centrování

Velmi zajímavé řešení. Spočívá v tom, že musíte nastavit výšku vnější nádoby:

Absolute-aligned ( position: relativní; min-height: 500px; background: hsl(200, 100%, 97%); ) .absolute-aligned img ( width: 50%; min-width: 200px; height: auto; overflow : auto; okraj: auto; pozice: absolutní; nahoře: 0; vlevo: 0; dole: 0; vpravo: 0; )

Centrování s překladem

Nové řešení, kde se používají transformace CSS. Poskytuje horizontální i vertikální centrování:

Center ( background: hsl(180, 100%, 97%); position: relativní; min-height: 500px; ) .center img ( position: absolute; top: 50%; left: 50%; transform: translate(-50) %, -50 %); šířka: 30 %; výška: auto; )

Existuje několik nevýhod:

• Vlastnost transformace CSS vyžaduje předpony prohlížeče
• Nefunguje ve starších verzích IE (8 a nižších)
• Vnější nádobě je třeba dát výšku.
• Pokud je uvnitř kontejneru text, může být trochu rozmazaný.

Centrování s flex zobrazením displeje

Asi nejjednodušší varianta.

Center ( background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; ) .center img ( width: 30%; height: auto; )

Nefunguje ve všech verzích IE (ačkoli můžete být na bezpečné straně, když navíc použijete display: table-cell). Kompletní CSS:

Center ( pozadí: hsl(240, 100 %, 97 %); displej: -webkit-box; /* Safari, iOS 6 a starší; Android, starší WebKit */ displej: -moz-box; /* Firefox (může a selhání) */ displej: -ms-flexbox; /* IE 10 */ displej: -webkit-flex; /* Chrome 21+ */ displej: flex; /* Opera 12.1+, Firefox 22+ */ -webkit- box -align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz - box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; )

Centrování pomocí calc

V některých případech je tato metoda univerzálnější než použití flexboxu:

Střed ( pozadí: hsl(300, 100 %, 97 %); min-výška: 600px; pozice: relativní; ) .center img ( šířka: 40 %; výška: auto; pozice: absolutní; nahoře: calc (50 % -) 20 %); vlevo: calc (50 % - 20 %); )

Je to velmi jednoduché, můžeme si vypočítat rozměry, které potřebujeme v závislosti na celém rozložení stránky. Výpočty jsou velmi jednoduché, 50 % je středový bod kontejneru, ale naším úkolem je umístit levý horní roh obrázku na tyto souřadnice. Dále odečtěte polovinu výšky a šířky obrázku. Vzorec je:

Nahoře: calc(50% - (40%/2)); vlevo: calc(50% - (40%/2));

V praxi můžete zjistit, že tato metoda funguje dobře, pokud známe rozměry prvků:

Center img ( šířka: 500px; výška: 500px; pozice: absolutní; top:calc(50% - (300px / 2)); vlevo: calc(50% - (300px - 2)); )

Tuto metodu podporuje Firefox, od verze 4 budete muset zaregistrovat předpony prohlížeče. Nefunguje v IE 8. Celý kód:

Střed img ( šířka: 40 %; výška: auto; pozice: absolutní; nahoře: -webkit-calc(50% - 20%); vlevo: -webkit-calc(50% - 20%); nahoře: -moz-calc (50 % - 20 %); vlevo: -moz-calc (50 % - 20 %); nahoře: calc (50 % - 20 %); vlevo: calc (50 % - 20 %); )

Doufám, že tyto metody vám postačí k tomu, abyste pro sebe našli to nejlepší řešení.

V CSS se ukáže, že některé zdánlivě jednoduché věci není tak snadné udělat. Jednou z těch 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á vám pomohou zjednodušit práci centrovacích prvků horizontálně a / nebo vertikálně.

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 - Zarovnat blok na střed

1. Zarovnání jednoho bloku na střed druhého. V tomto případě mají první a druhý blok dynamické rozměry.

Rodič ( pozice: relativní; ) .child ( pozice: absolutní; vlevo: 50 %; nahoře: 50 %; -webkit-transform: translate(-50 %, -50 %); -moz-transform: translate(-50 % , -50 %); -ms-transform: translate(-50 %, -50 %); -o-transform: translate(-50 %, -50 %); transform: translate(-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.

Rodič ( pozice: relativní; ) .child ( pozice: absolutní; /* šířka a výška pole 2 v % */ výška: 50 %; šířka: 50 %; /* Hodnoty jsou určeny na základě 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. Horizontální zarovnání vloženého (zobrazení: inline) nebo inline-block (zobrazení: inline-block):

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. Rodičovský rámeček 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 se nadřazený prvek zobrazí 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ší skvělé triky nebo užitečná řešení pro zarovnání, podělte se o ně v komentářích.