Zarovnat img svisle css. Centrování CSS bloků DIV: horizontální a vertikální

V procesu rozvržení webových stránek je úloha centrování bloků zcela běžná. Může to být vertikální nebo horizontální centrování.

Pokud má například web pevnou šířku, pak by bylo rozumné zarovnat jej do středu okna prohlížeče, protože to usnadňuje čtení textu (zejména pokud je monitor velký). Některé návrhy obecně zahrnují umístění bloku do středu okna prohlížeče, tj. vertikální i horizontální vystředění.

Nejprve si povíme něco o horizontálním centrování. Nejoblíbenější technika je, když je blok vycentrován nastavením rozměrů vpravo a vlevo okraj na "auto". Řekněme, že chceme vycentrovat blok s id = "kontejner" a šířkou 860px. V tomto případě musíte do souboru CSS napsat:

#kontejner (
barva pozadí:#EEE;
šířka:860px;
margin:0px auto;
}

Nicméně I.E. starší verze (například 5.0) nezarovnají tento blok na střed. Samozřejmě, že tak staré prohlížeče už nikdo nepoužívá (z 1800 mých denních návštěvníků - pouze 1), ale pro každý případ je lepší, aby to fungovalo i tam :)

K tomu je třeba, aby nadřazený prvek, tedy ten, ve kterém vycentrujeme náš blok (obvykle je nadřazeným prvkem tag BODY), nastavit parametr text-align:center. V tomto případě bude blok zarovnán na střed, ale veškerý jeho obsah bude také zarovnán na střed, ale to nepotřebujeme. Proto uvnitř tohoto bloku nastavíme výchozí zarovnání - text-align:left .

tělo (text-align:center)

#kontejner (
barva pozadí:#EEE;
šířka:860px;
margin:0px auto;
text-align:left;
}

Existuje také další způsob, jak vodorovně zarovnat blok, založený na . Jak asi víte, ve výchozím nastavení je jakýkoli prvek bloku přitisknut k levému okraji nadřazeného prvku. K zarovnání na střed tedy potřebujete:

2. Posuňte jej doprava o 50 % šířky okna prohlížeče

3. Pomocí záporné výplně jej posuňte doleva o vzdálenost rovnající se polovině šířky bloku.

Tímto způsobem bude blok vycentrován. Pro větší přehlednost se podívejte na video níže:

Příklad kódu CSS:

#kontejner (
background-color:#559964;
poloha:absolutní;
vlevo: 50 %;
margin-left:-430px;
šířka:860px;
}

Je třeba poznamenat, že pokud chcete umístit blok nikoli vzhledem k oknu prohlížeče, ale například vzhledem k jinému bloku, musíte pro tento další blok nastavit poloha:relativní;

Řekněme, že náš blok #container, který je třeba vycentrovat, leží uvnitř bloku #wrap. Pak bude kód vypadat takto:

#zabalit(pozice:relativní)

#kontejner (
background-color:#559964;
poloha:absolutní;
vlevo: 50 %;
margin-left:-430px;
šířka:860px;
}

Nyní se podíváme na případ, kdy potřebujete zarovnat blok na střed stránky, tzn. Aplikujte současně horizontální a vertikální centrování. Zde opět vstupuje do hry polohování. Potřebujeme tedy:

1. Nastavte blok do absolutní polohy

2. Posuňte jej o 50 % doprava a o 50 % dolů, čímž jeho levý horní roh umístíte do středu okna prohlížeče.

3. Pomocí záporné výplně jej posuňte nahoru o vzdálenost rovnou polovině výšky bloku a doleva o vzdálenost rovnou polovině šířky bloku.

Tím se blok umístí do středu webové stránky.

Řekněme, že výška našeho bloku je 600px a šířka je 860px. Pak bude CSS kód vypadat takto:

#kontejner (
background-color:#559964;
poloha:absolutní;
horní: 50 %;
vlevo: 50 %;
margin-top:-300px;
margin-left:-430px;
výška:600px;
šířka:860px;
}

Doufám, že samotný princip je vám jasný.

Ohodnoťte tuto lekci: 1 2 3 4 5

komentáře:

Budu první, kdo se na lekci podívá!!!

Eh... Za druhé =) Nedávno jsem narazil na tento problém v IE, trpěl jsem dlouho)) Děkuji =)

Děkuji, stránka uložená do záložek)))

Děkuji moc, Andrey, za nové lekce!

Jen děkuji, myslím, že zde není co dodat))

Díky za lekci, doslova jsem se o to pokusil před pár dny, trochu trpěl a dočasně to odložil

Ale mám problém: stránka v Mozille Firefox nechce být zarovnaná, je přilepená k levému okraji a je to, nic z výše uvedeného nepomáhá (totéž v Opeře).

proč to nejde? - "chcete-li umístit blok ne relativně k oknu prohlížeče, ale například relativně k jinému bloku, pro tento jiný blok musíte nastavit pozici: relativní;"

Díky moc!!

Vše je v pořádku, ale z nějakého důvodu všechny obrázky zapadnou na své místo až po aktualizaci prohlížeče. Řekněte mi prosím, proč se to děje?

Andrey, přidejte prosím vyhledávání na webu.

Přidat komentář.

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 podělím o své oblíbené a nejjednodušší způsoby, pomocí CSS nebo jQuery.

Nejprve 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 určit šířku bloku (width), použijte vlastnost auto pro marže vlevo a vpravo. Tato metoda bude fungovat pro všechny prvky bloku (div, p, h1 atd.). Chcete-li použít horizontální centrování na vložené prvky (odkazy, obrázky...), musíte použít parametr 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í Umístěním bloku jej můžeme 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ě. Levý horní roh bloku je nyní ve středu okna prohlížeče. Zbývá pouze nainstalovat blok div do středu stránky jeho přesunutím polovinu své šířky vlevo a polovinu její výšky nahoru. Hurá! Výsledkem bylo vynikající centrování bloku pomocí čistého CSS kódu.

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

Jak již bylo zmíněno dříve – metoda centrování CSS funguje pouze s pevnými rozměry. 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();

Operace této metody spočívá ve spuštění funkce 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 v kontrastu šířka() A výška(), zahrnují výplň a tloušťku ohraničení ve velikosti, kterou vrátí. Poslední řádek zahájí proces centrování bloku div při načítání stránky.

Výhodou použití této metody je, že možná nevíte, jakou má div velikost. 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.

Jako vždy můžete v komentáři navrhnout svou oblíbenou metodu centrování bloků.

Zarovnání prvků na webové stránce může být náročný úkol, zejména pokud jde o svislé zarovnání textu. Tato otázka se často vyskytuje na fórech a řešení tohoto problému je pro začínající uživatele obzvláště obtížné. Ale ve skutečnosti zde není nic složitého. Vše, co potřebujete, je malá znalost kaskádových stylů CSS. Vzhledem k tomu, že se to vše děje díky jeho pravidlům.

Vertikální 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 několik příkladů a na základě podmínek si pro sebe vyberete vhodnou rotaci.

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

/* č.1 */ .talign1( ohraničení: 1px plná červená; výška:200px;/* výška bloku */ ) .talign1 > p( výška-řádku:200px;/* nastaví výšku řádku podle výšky bloku * / margin :0;/* odstranit vnější odsazení, pokud existuje */ text-align:center;/* zarovnat text vodorovně na střed */ padding: 0;/* odstranit vnitřní odsazení, pokud existuje */ ) /* konec Č.1*/

Úplně stejným způsobem je možné implementovat obrázek ve vertikálním středu, ale přidáním jedné nové vlastnosti vertical-align: middle; .

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 procentuální vystředění prvku bude vystředěno na horní levý okraj vnitřního bloku.

Proto musíte nastavit zápornou hodnotu pro okraje. Velikost prohlubně nahoře by měla odpovídat polovině výšky vnitřního bloku a prohlubeň vlevo by měla odpovídat polovině šířky. Tak získáme absolutní střed.

V této možnosti je pravděpodobně 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( ohraničení: 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 %;

Zarovnání s vlastností tabulky

Zde používáme starou techniku, přeměnu prvků na tabulku s buňkami. V tomto případě tabulky tagy

se nepoužije, ale použije vlastnosti CSS, jako je display: table; , zobrazení: tabulka-buňka; . Ve starších verzích IE tato metoda nefunguje a není nutná. Používá je skutečně někdo jiný?

Příklad. demo #4

/* č.4 */ .talign4( ohraničení: 1px plná červená; výška:200px;/* výška bloku */ zobrazení: tabulka; šířka: 100 %; ) .talign4 div( zobrazení: buňka-tabulka; svislé zarovnání: uprostřed ; zarovnání textu:na střed ) /* konec #4*/

Zarovnání s vlastností flex

Toto je specifičtější možnost s vlastnostmi, které se v rozložení webu tak často nenacházejí. Ve vzácných případech jsou však velmi užitečné.

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

Horizontální vycentrování prvků není tak obtížné, vertikálně to již vyvolává otázky, ale jejich kombinování obecně může být slepá ulička. V éře responzivního designu máme málokdy jasno v přesných rozměrech 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:

Vodorovné zarovnání pomocí zarovnání 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 vlastnosti margin-top a margin-bottom k div.

Centrování s okrajem: auto

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

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

Upozorňujeme, že pro tuto metodu musíte nastavit vlastnost display: block.

Centrování pomocí tabulky-buňky

Použitím display: table-cell zajistíme vystředění prvku 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í techniky nastavením výšky. Funguje všude, včetně IE8+.

Absolutní vyrovnání

Velmi zajímavé řešení. Myšlenka je taková, ž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; poloha: nahoře: 0;

Centrum pomocí překladu

Nové řešení, které využívá transformace CSS. Poskytuje horizontální i vertikální zarovná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 %: 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í pomocí typu flex display

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 se můžete chránit pomocí display: table-cell navíc). 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 buggy) */ displej: -ms-flexbox; /* IE 10 */ displej: -webkit-flex; /* Chrome 21+ */ displej: flex /* Opera 12.1+, Firefox 22+ */ -webkit- box -zarovnat: na střed; -zarovnání-webu: na střed; -zarovnat-obsah: střed;

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 %): vypočteno (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 následující:

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 %) zleva: -moz-calc (50 % - 20 %);

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

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". a obsah buňky nemusí být svisle vycentrován, protože toto je výchozí poloha.

Chcete-li nastavit výšku stolu na 100 %, musíte jej odstranit, kód přestává platit.

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 , je přípustné nastavit několik typů poloh prvků vůči sobě. Na Obr. Obrázek 1 ukazuje způsoby horizontálního zarovnání prvků.

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 musíte nastavit atribut valign s hodnotou top (příklad 2).

Příklad 2: Použití valign

Sloupec 1

Sloupec 2

V tomto příkladu jsou charakteristiky buňky řízeny pomocí parametrů tagu , ale je také pohodlnější měnit styly. Zejména zarovnání v buňkách je určeno vlastnostmi vertikálního zarovnání a zarovnání textu (příklad 3).

Příklad 3: Použití stylů pro zarovnání

Sloupec 1

Sloupec 2

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.

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. Vnější buňky by měly mít stejné rozměry, ve střední buňce je zarovnání vystředěno a v pravé buňce - 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

(18.6)

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.

Abyste zajistili, že text vedle polí formuláře bude zarovnán doprava a samotné prvky formuláře budou zarovnány doleva, budete potřebovat 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

název
E-mailem
Komentář

V tomto příkladu je pro buňky, kde je vyžadováno zarovnání vpravo, přidán atribut align="right". Aby bylo zajištěno, že popisek Komentář je umístěn v horní části víceřádkového textu, je odpovídající buňka nastavena na zarovnání nahoře pomocí atributu valign.