Domov Bezpečnosť Horizontálne a vertikálne zarovnanie prvkov. Ako urobiť zarovnanie textu na stred, šírku, okraje stránky v HTML

Horizontálne a vertikálne zarovnanie prvkov. Ako urobiť zarovnanie textu na stred, šírku, okraje stránky v HTML

Horizontálne a vertikálne zarovnanie prvkov je možné vykonať rôznymi spôsobmi. Výber metódy závisí od typu prvku (blok alebo inline), od typu jeho umiestnenia, veľkosti atď.

1. Horizontálne zarovnanie na stred bloku / strany

1.1. Ak má blok šírku:

div ( šírka: 300px; okraj: 0 auto; /*vycentrovať prvok vodorovne v rámci rodičovského bloku*/ )

Ak chcete týmto spôsobom zarovnať vložený prvok, musíte ho nastaviť na zobrazenie: blok;

1.2. Ak je blok vnorený do iného bloku a nemá preň nastavené žiadne/šírka:

.wrapper(text-align:center;)

1.3. Ak má blok šírku a je potrebné ho upevniť v strede nadradeného bloku:

.wrapper (pozícia: relatívna; /*nastaví rodičovský rámček na relatívnu pozíciu, aby sme v ňom mohli neskôr úplne umiestniť rámček*/) .box (šírka: 400px; pozícia: absolútna; vľavo: 50%; margin-left: - 200px; / *posunie blok doľava o vzdialenosť rovnajúcu sa polovici jeho šírky*/ )

1.4. Ak pre bloky nie je nastavená žiadna šírka, môžete ich vycentrovať pomocou nadradeného bloku obalu:

.wrapper (text-align: center; /*vycentrovať obsah bloku*/) odsadenie medzi blokmi*/ )

2. Vertikálne zarovnanie

2.1. Ak text zaberá jeden riadok, napríklad pre tlačidlá a položky ponuky:

.button ( výška: 50px; výška riadku: 50px; )

2.2. Ak chcete zarovnať blok vertikálne vo vnútri nadradeného bloku:

.wrapper (pozícia: relatívna;) .box ( výška: 100px; pozícia: absolútna; hore: 50%; okraj: -50px 0 0 0; )

2.3. Vertikálne zarovnanie podľa typu tabuľky:

.wrapper ( display: table; width: 100%; ) .box ( display: table-cell; height: 100px; text-align: center; vertical-align: middle; )

2.4. Ak má rámček nastavenú šírku a výšku a je potrebné ho vycentrovať na rodičovský rámček:

.wrapper ( pozícia: relatívna; ) .box ( výška: 100px; šírka: 100px; pozícia: absolútna; hore: 0; vpravo: 0; dole: 0; vľavo: 0; okraj: auto; pretečenie: auto; /*do obsah sa nerozšíril */ )

2.5. Absolútne umiestnenie do stredu stránky/bloku pomocou transformácie CSS3:

ak má prvok rozmery

div ( šírka: 300px; /*nastaviť šírku bloku*/ výšku:100px; /*nastaviť výšku bloku*/ transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50% ;)

ak prvok nemá žiadne rozmery a nie je prázdny

Tu je nejaký text

h1 ( okraj: 0; transformácia: preložiť (-50 %, -50 %); pozícia: absolútna; hore: 50 %; vľavo: 50 %; )

Úlohou je veľmi často zarovnať blok na stred stránky/obrazovky a to aj tak, že bez java skriptu, bez nastavovania tvrdých veľkostí alebo záporných zarážok, aby rolovacie lišty fungovali na rodičovi, ak blok prekročí svoju veľkosť. Na nete je pomerne veľa monotónnych príkladov, ako zarovnať blok na stred obrazovky. Väčšina z nich je spravidla založená na rovnakých princípoch.

Nižšie sú uvedené hlavné spôsoby riešenia problému, ich výhody a nevýhody. Aby ste pochopili podstatu príkladov, odporúčam zmenšiť výšku / šírku okna Výsledok v príkladoch na uvedených odkazoch.

Možnosť 1. Negatívna výplň.

Polohovanie blokovať horné a ľavé atribúty o 50 % a s vedomím výšky a šírky bloku vopred nastavte záporný okraj, ktorý sa rovná polovici veľkosti blokovať. Obrovské mínus túto možnosť je, že musíte počítať záporné zarážky. Rovnakým spôsobom blokovať sa v prostredí posuvníkov správa nie celkom korektne – je jednoducho odrezaný, pretože má záporné zarážky.

Nadradený ( šírka: 100 %; výška: 100 %; pozícia: absolútna; hore: 0; vľavo: 0; pretečenie: auto; ) .block ( šírka: 250px; výška: 250px; pozícia: absolútna; hore: 50 %; vľavo : 50 %; okraj: -125 pixelov 0 0 -125 pixelov; img ( max-width: 100 %; výška: auto; zobrazenie: blok; okraj: 0 auto; orámovanie: žiadne; ) )

Možnosť 2: Automatické odsadenie.

Menej časté, ale podobné ako prvé. Pre blokovať nastavte šírku a výšku, umiestnite atribúty vľavo hore na 0 a nastavte automatický okraj. Výhodou tejto možnosti sú funkčné posuvníky rodič, ak má 100% šírku a výšku. Nevýhodou tejto metódy je pevné dimenzovanie.

Nadradený ( šírka: 100 %; výška: 100 %; pozícia: absolútna; hore: 0; vľavo: 0; pretečenie: auto; ) .block ( šírka: 250px; výška: 250px; pozícia: absolútna; hore: 0; vpravo: 0; dole: 0; vľavo: 0; okraj: auto; obr. ( max. šírka: 100 %; výška: auto; zobrazenie: blok; okraj: 0 auto; okraj: žiadny; ) )

Možnosť 3. Tabuľka.

Pýtame sa rodičštýly tabuľky, bunka rodič Nastavte zarovnanie textu na stred. ALE blok nastaviť model inline bloku. Nevýhodou sú nefungujúce posuvníky a vo všeobecnosti ani estetika „emulácie“ tabuľky.

Rodič ( šírka: 100 %; výška: 100 %; zobrazenie: tabuľka; pozícia: absolútna; hore: 0; vľavo: 0; > .inner ( display: table-cell; text-align: center; vertical-align: middle; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )

Ak chcete do tohto príkladu pridať zvitok, budete musieť do štruktúry pridať ešte jeden prvok.
Príklad: jsfiddle.net/serdidg/fk5nqh52/3 .

Možnosť 4. Pseudoprvok.

Táto možnosť je zbavená všetkých problémov uvedených v predchádzajúcich metódach a tiež rieši pôvodné úlohy. Ide o to mať rodič nastaviť štýly pseudo prvok predtým, konkrétne 100% výška, zarovnanie na stred a model inline boxu. To isté s blokovať vložte model inline bloku, zarovnanie na stred. Komu blokovať nespadol pod pseudo prvok keď sú rozmery prvého väčšie ako rodič, špecifikujte rodič white-space: nowrap a font-size: 0, po ktorom y blokovať zrušte tieto štýly nasledujúcim spôsobom - biele miesto: normálne. AT tento príklad font-size: 0 je potrebná na odstránenie výslednej medzery medzi rodič a blokovať v súvislosti s formátovaním kódu. Medzera môže byť odstránená inými spôsobmi, ale považuje sa za najlepšie to jednoducho nedovoliť.

Rodič ( šírka: 100 %; výška: 100 %; pozícia: absolútna; hore: 0; vľavo: 0; pretečenie: auto; medzera: nowrap; zarovnanie textu: na stred; veľkosť písma: 0; &:pred ( výška: 100 %; zobrazenie: inline-block; vertical-align: middle; content: ""; ) ) .block ( display: inline-block; white-space: normal; vertical-align: middle; text-align: left ; img ( display: block; border: none; ) )

Alebo ak chcete, aby rodič zabral iba výšku a šírku okna, nie celú stránku:

Rodič ( pozícia: pevná; horná: 0; pravá: 0; spodná: 0; ľavá: 0; pretečenie: auto; medzera: nowrap; zarovnanie textu: na stred; veľkosť písma: 0; &:pred ( výška: 100 %; zobrazenie: inline-block; vertical-align: middle; content: ""; ) ) .block ( display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img ( display: block; border: none; ) )

Možnosť 5. Flexbox.

Jedným z najjednoduchších a najelegantnejších spôsobov je použitie flexboxu. Nevyžaduje zbytočné pohyby tela, celkom jasne popisuje podstatu toho, čo sa deje, a má vysokú flexibilitu. Jediná vec, ktorú treba pamätať pri výbere túto metódu- podpora IE od verzie 10 vrátane. caniuse.com/#feat=flexbox

Nadradená položka ( šírka: 100 %; výška: 100 %; poloha: pevná; horná: 0; ľavá: 0; zobrazenie: ohyb; zarovnanie položiek: na stred; zarovnanie obsahu: na stred; zarovnanie obsahu: na stred; pretečenie: automatické; ) .block ( background: #60a839; img ( display: block; border: none; ) )

Možnosť 6. Transformácia.

Vhodné, ak sme obmedzení konštrukciou, a nedá sa s ním nijako manipulovať nadradený prvok, a blok je potrebné nejako zarovnať. Na pomoc príde funkcia translate() css. S hodnotou 50 % absolútne umiestnenie umiestni ľavý horný roh rámčeka presne na stred, potom záporná hodnota prekladu posunie rámček vzhľadom na jeho vlastné rozmery. Upozorňujeme, že negatívne efekty sa môžu prejaviť vo forme rozmazaných okrajov alebo štýlu písma. Podobná metóda môže tiež viesť k problémom s výpočtom polohy bloku pomocou java-script "a. Niekedy na kompenzáciu straty 50% šírky v dôsledku použitie css vlastnosť left môže pomôcť pravidlom nastaveným pre blok: margin-right: -50%; .

Nadradená ( šírka: 100 %; výška: 100 %; pozícia: pevná; horná: 0; ľavá: 0; pretečenie: auto; ) .block ( poloha: absolútna; horná: 50 %; ľavá: 50 %; transformácia: preložiť( -50 %, -50 %); img ( displej: blok; ) )

Možnosť 7. Tlačidlo.

Používateľská možnosť kde blokovať zabalené v gombíkovej visačke. Tlačidlo má schopnosť vycentrovať všetko, čo sa v ňom nachádza, teda prvky líniového a blokovo-riadkového (inline-blokového) modelu. V praxi to neodporúčam.

Rodič ( šírka: 100 %; výška: 100 %; pozícia: absolútna; hore: 0; vľavo: 0; pretečenie: automatické; pozadie: žiadne; ohraničenie: žiadne; obrys: žiadne; ) .block ( zobrazenie: inline-block; img ( display: block;; border: none; ) )

Bonus

Pomocou myšlienky 4. možnosti môžete nastaviť okraje pre blokovať, a zároveň sa ten druhý adekvátne zobrazí v prostredí scrollbarov.
Príklad: jsfiddle.net/serdidg/nfqg9rza/2 .

Môžete tiež zarovnať obrázok na stred a ak je obrázok väčší rodič, prispôsobte veľkosť rodič.
Príklad: jsfiddle.net/serdidg/nfqg9rza/3 .
Veľký obrazový príklad:

Vlad Merževič

Vďaka tomu, že obsah buniek tabuľky je možné súčasne horizontálne aj vertikálne zarovnať, rozširujú sa možnosti riadenia polohy prvkov voči sebe. Tabuľky vám umožňujú nastaviť zarovnanie obrázkov, textu, polí formulárov a iných prvkov navzájom a vzhľadom na webovú stránku ako celok. Vo všeobecnosti je zarovnanie potrebné hlavne na vytvorenie vizuálneho spojenia medzi rôznymi prvkami, ako aj na ich zoskupenie.

Vertikálne centrovanie

Jedným zo spôsobov, ako ukázať návštevníkovi zameranie a názov stránky, je použiť úvodnú stránku. Toto je prvá stránka, na ktorej sa spravidla nachádza flash-intro alebo obrázok vyjadrujúci hlavnú myšlienku stránky. Obrázok je zároveň odkazom na iné časti stránky. Tento obrázok je potrebné umiestniť do stredu okna prehliadača bez ohľadu na rozlíšenie monitora. Na tento účel môžete použiť tabuľku so šírkou a výškou rovnajúcou sa 100 % (príklad 1).

Príklad 1: Vycentrovanie obrázka

zarovnanie

V tomto príklade je horizontálne zarovnanie nastavené pomocou parametra značky align="center". a obsah bunky nemusí byť vycentrovaný vertikálne, pretože táto poloha je predvolene nastavená.

Ak chcete nastaviť výšku stola na 100 %, odstráňte, kód už nie je platný.

Použitie šírky a výšky pre celú dostupnú oblasť webovej stránky zaisťuje, že obsah tabuľky bude presne zarovnaný v strede okna prehliadača bez ohľadu na jej veľkosť.

Horizontálne zarovnanie

Kombináciou atribútov align (horizontálne zarovnanie) a valign ( vertikálne zarovnanie) tag , je prípustné nastaviť niekoľko typov polôh prvkov voči sebe navzájom. Na obr. 1 ukazuje, ako horizontálne zarovnať prvky.

Pozrime sa na niekoľko príkladov zarovnania textu podľa obrázku nižšie.

Horné zarovnanie

Ak chcete určiť zarovnanie obsahu bunky nahor pre značku je potrebné nastaviť atribút valign s hodnotou top (príklad 2).

Príklad 2: Použitie valign

zarovnanie

Stĺpec 1

2. stĺpec

V tomto príklade sú charakteristiky buniek riadené pomocou parametrov značky , ale je tiež pohodlnejšie meniť štýly. Zarovnanie buniek je určené najmä vlastnosťami vertikálneho zarovnania a zarovnania textu (príklad 3).

Príklad 3: Použitie štýlov na zarovnanie

zarovnanie

Stĺpec 1

2. stĺpec

Na skrátenie kódu sa v tomto príklade používa zoskupenie selektorov, pretože vlastnosti vertikálneho zarovnania a výplne sa aplikujú na dve bunky súčasne.

Spodné zarovnanie sa vykonáva rovnakým spôsobom, ale namiesto horného sa používa spodné zarovnanie.

Zarovnanie na stred

Štandardne je obsah bunky zarovnaný na stred ich vertikály, takže v prípade rôznych výšok stĺpcov je potrebné nastaviť zarovnanie nahor. Niekedy je stále potrebné ponechať pôvodný spôsob zarovnania, napríklad pri umiestňovaní vzorcov, ako je znázornené na obr. 2.

V tomto prípade je vzorec umiestnený presne v strede okna prehliadača a jeho číslo je na pravom okraji. Na takéto usporiadanie prvkov potrebujete tabuľku s tromi bunkami. Extrémne bunky by mali mať rovnakú veľkosť, v strednej bunke sa zarovnanie vykonáva v strede a v pravej bunke - na pravom okraji (príklad 4). Tento počet buniek je potrebný, aby sa zabezpečilo, že vzorec bude vycentrovaný.

Príklad 4: Zarovnanie vzorca

zarovnanie

(18.6)

V tomto príklade je prvá bunka tabuľky ponechaná prázdna, slúži len na vytvorenie odsadenia, ktoré sa mimochodom dá nastaviť aj pomocou štýlov.

Zarovnanie prvkov formulára

Tabuľky sú užitočné na umiestnenie polí formulára, najmä ak sú poprekladané textom. Jedna z možností dizajnu formulára, ktorý je určený na zadávanie komentára, je znázornená na obr. 3.

Aby bol text v blízkosti polí formulára zarovnaný doprava a samotné prvky formulára boli zarovnané doľava, potrebujete tabuľku s neviditeľným okrajom a dvoma stĺpcami. Ľavý stĺpec bude obsahovať samotný text a pravý stĺpec bude obsahovať textové polia (príklad 5).

Príklad 5 Zarovnanie polí formulára

zarovnanie

V tomto príklade bol pridaný atribút align="right" pre bunky, ktoré vyžadujú zarovnanie vpravo. Aby sa označenie "Komentár" nachádzalo na hornom okraji viacriadkového textu, príslušná bunka je nastavená na zarovnanie zhora pomocou atribútu valign.