Veta vpravo

Veta s použitím konca

C IN E TOTO

Na vytvorenie červenej čiary potrebujete poznať iba jeden parameter.

Toto je jednoduchá vlastnosť odsadenia textu.

metódu zobrazenia ako tabuľku, potom ju môžeme použiť vlastnosť vertikálneho zarovnania(ktorý v rôznych prvkoch funguje odlišne).

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

klady

• Obsah môže dynamicky meniť výšku (výška nie je definovaná v CSS).
• Obsah sa neodreže, ak naň nie je dostatok miesta.

Mínusy

• Nefunguje v IE 7 alebo menej
• Veľa vnorených značiek

2. spôsob

Táto metóda používa absolútne umiestnenie prvku div, pričom horná časť je nastavená na 50 % a horná časť je znížená o polovicu výšky obsahu. To znamená, že objekt musí mať pevnú výšku, ktorá je definovaná v štýloch CSS.

Keďže výška je pevná, môžete nastaviť overflow:auto; v prípade prvku div s obsahom, ak sa teda obsah nezmestí, zobrazia sa posúvače.

#content ( position: absolute; top: 50%; height: 240px; margin-top: -120px; /* mínus polovica výšky */ )

klady

• Funguje vo všetkých prehliadačoch.
• Nedochádza k zbytočnému hniezdeniu.

Mínusy

• Keď nie je dostatok miesta, obsah zmizne (napríklad, div je vo vnútri tela a používateľ zmenšil okná, v takom prípade sa posuvníky nezobrazia.

3. spôsob

Pri tejto metóde zabalíme obsahový div iným div. Nastavme jej výšku na 50 % (výška: 50 %;), a spodný okraj na polovicu výšky (margin-bottom:-contentheight;). Obsah bude jasne plávať a bude vycentrovaný.

#floater( float: left; height: 50%; margin-bottom: -120px; ) #content( clear: both; height: 240px; position: relatívna; )

klady

• Funguje vo všetkých prehliadačoch.
• Keď nie je dostatok miesta (napríklad pri zmenšení okna), obsah nie je orezaný, objavia sa posuvníky.

Mínusy

• Napadá ma len jedna vec: že sa používa ďalší prázdny prvok.

4. spôsob.

Táto metóda používa vlastnosť position:absolute;. pre div s pevnými rozmermi (šírka a výška). Potom nastavíme jeho súradnice top:0; spodná časť: 0; , ale keďže má pevnú výšku, nemôže sa natiahnuť a je zarovnaný na stred. Toto je veľmi podobné známej metóde horizontálne zarovnanie vycentrované na prvok bloku s pevnou šírkou (okraj: 0 auto;).

#content( pozícia: absolútna; hore: 0; dole: 0; vľavo: 0; vpravo: 0; okraj: auto; výška: 240px; šírka: 70 %; )

klady

• Veľmi jednoduché.

Mínusy

• Nefunguje v internet Explorer
• Ak v kontajneri nie je dostatok miesta, obsah bude orezaný bez posúvačov.

5. spôsob

Pomocou tejto metódy môžete zarovnať jeden riadok textu na stred. Stačí nastaviť výšku textu (výška riadku) rovnakú výšku prvok (výška). Potom sa čiara zobrazí v strede.

#content( height: 100px; line-height: 100px; )

klady

• Funguje vo všetkých prehliadačoch.
• Neorezáva text, ak sa nezmestí.

Mínusy

• Funguje iba s textom (nepracuje s prvkami bloku).
• Ak je tam viac ako jeden riadok textu, vyzerá to veľmi zle.

Táto metóda je veľmi užitočná pre malé prvky, napríklad na vycentrovanie textu v tlačidle alebo textovom poli.

Teraz už viete, ako dosiahnuť vertikálne zarovnanie na stred, urobme si jednoduchú webovú stránku, ktorá bude nakoniec vyzerať takto:

Krok 1

Vždy je dobré začať sémantické označenie. Naša stránka bude mať nasledovnú štruktúru:

• #floater (na stred obsahu)
• #centred (centrálny prvok)
  • #strana
    • #logo
    • #nav (zoznam
    • #obsah
  • #bottom (pre autorské práva a všetko ostatné)

  Napíšme si nasledujúce html označenie:

  Spoločnosť

  • Domov
  • Produkty
  • Blog
  • Kontakt
  • O

  Názov stránky

  Holisticky prerobte outsourcing s pridanou hodnotou po spolupráci zameranej na procesy a zdieľaní nápadov. Energeticky zjednodušiť vplyvné vedľajšie trhy prostredníctvom povolených imperatívov. Holisticky prevládajú prémiové inovácie po presvedčivých scenároch. Bezproblémovo rekapitulujte vysoké štandardy ľudského kapitálu pomocou špičkových vyrábaných produktov. Výrazne syndikujte schémy vyhovujúce štandardom pred robustnými vortálmi. Jedinečne rekapitulujte využitú pripravenosť webu vis-a-vis predpripravenými informáciami.

  Nadpis 2

  Efektívne si osvojte prispôsobenú webovú pripravenosť namiesto procesov riadených zákazníkmi. Asertívne rozvíjajte multiplatformové požiadavky v porovnaní s proaktívnymi technológiami. Pohodlne posilnite multidisciplinárne metaslužby bez celopodnikových rozhraní. Pohodlne zefektívnite konkurenčné strategické tematické oblasti pomocou zameraných elektronických trhov. Fosfluorescenčne syndikujte komunity svetovej triedy na trhoch s pridanou hodnotou. Vhodne znovu objavte holistické služby pred robustnými elektronickými službami.

  Upozornenie o autorských právach sa nachádza tu

  
  
  

  Krok 2

  Teraz budeme písať najjednoduchšie CSS, ak chcete umiestniť prvky na stránku. Tento kód by ste mali uložiť do súboru style.css. Práve na to je odkaz zapísaný v html súbore.

  Html, telo ( okraj: 0; odsadenie: 0; výška: 100 %; ) telo ( pozadie: url("page_bg.jpg") 50 % 50 % bez opakovania #FC3; rodina fontov: Georgia, Times, pätky; ) #floater ( pozícia: relatívna; plávajúca: vľavo; výška: 50%; okraj-dole: -200px; šírka: 1px; ) #centered ( pozícia: relatívna; jasná: vľavo; výška: 400px; šírka: 80 %; max. -width: 800px; min-width: 400px; margin: 0 auto; background: #fff; border: 4px solid #666; ) #bottom (position: absolute; bottom: 0; right: 0; ) #nav (position: absolútne; vľavo: 0; hore: 0; dole: 0; vpravo: 70 %; odsadenie: 20 pixelov; okraj: 10 pixelov; ) #content ( pozícia: absolútna; vľavo: 30 %; vpravo: 0; hore: 0; dole: 0; pretečenie: automatické; výška: 340 pixelov; odsadenie: 20 pixelov; okraj: 10 pixelov; )

  Pred zarovnaním nášho obsahového centra musíme nastaviť výšku tela a html na 100 %. Keďže výška sa počíta bez vnútornej a vonkajšej výplne (výplň a okraj), nastavíme ich (výplň) na 0, aby tam neboli žiadne posuvníky.

  Spodný okraj prvku „floater“ sa rovná mínus polovici výšky obsahu (400 pixelov), konkrétne -200 pixelov ;

  Vaša stránka by teraz mala vyzerať asi takto:

  

  #šírka prvku v strede 80%. Vďaka tomu je naša stránka užšia na malých obrazovkách a širšia na väčších. väčšina stránok vyzerá neslušne, keď sú nové široké monitory v ľavom hornom rohu. Vlastnosti min-width a max-width tiež obmedzujú našu stránku, aby nevyzerala príliš široká alebo príliš úzka. Internet Explorer nepodporuje tieto vlastnosti. Musíte ho nastaviť na pevnú šírku.

  Keďže prvok #centered má nastavenú pozíciu:relatívnu, môžeme použiť absolútne umiestnenie prvkov v ňom. Potom nastavte overflow:auto; pre prvok #content, aby sa v prípade, že sa obsah nezmestí, zobrazili posúvače.

  Krok 3

  Posledná vec, ktorú urobíme, je pridať nejaký štýl, aby stránka vyzerala o niečo atraktívnejšie. Začnime s jedálnym lístkom.

  #nav ul ( list-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0; ) #nav li ( padding: 0; margin: 3px; ) #nav li a ( display: block; background-color: #e8e8e8; padding: 7px; margin: 0; text-decoration: none; color: #000; border-bottom: 1px solid #bbb; text-align: right; ) #nav li a::after ( content: """; farba: #aaa; font-weight: bold; display: inline; float: right; margin: 0 2px 0 5px; ) #nav li a:hover, #nav li a:focus ( background: # f8f8f8; border-bottom-color: #777; ) #nav li a:hover::after ( margin: 0 0 0 7px; color: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )

  Prvá vec, ktorú sme urobili, aby ponuka vyzerala lepšie, bolo odstránenie odrážok nastavením atribútu list-style:none a tiež nastavenie paddingu a paddingu, keďže sa v rôznych prehliadačoch štandardne veľmi líšia.

  Všimnite si, že sme potom určili, že odkazy by sa mali vykresliť ako prvky bloku. Teraz sú pri zobrazení natiahnuté po celej šírke prvku, v ktorom sa nachádzajú.

  Iné zaujímavá vec, ktoré sme použili pre menu sú pseudotriedy:pred a:po . Umožňujú vám pridať niečo pred a za prvok. Toto dobrý spôsob pridajte ikony alebo symboly, ako napríklad šípku na koniec každého odkazu. Tento trik nefunguje v programe Internet Explorer 7 a nižších.

  

  Krok 4

  A v neposlednom rade do nášho dizajnu pridáme niekoľko skrutiek pre ešte väčšiu krásu.

  #centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( rodina fontov: Helvetica, Arial, sans- serif; font-weight: normal; color: #666; ) h1 ( color: #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 ( farba: #f03; )

  V týchto štýloch nastavujeme zaoblené rohy pre prvok #centered. V CSS3 to urobí vlastnosť border-radius. Toto ešte nie je implementované v niektorých prehliadačoch, okrem použitia predpôn -moz a -webkit pre Mozilla Firefox a Safari/Webkit.

  

  Kompatibilita

  Ako ste už pravdepodobne uhádli, hlavným zdrojom problémov s kompatibilitou je Internet Explorer:

  • Prvok #floater musí mať nastavenú šírku
  • IE 6 má extra výplň okolo ponúk

  237152 zobrazení

  Ahoj! Pokračujme v zvládnutí základov jazyk HTML. Pozrime sa, čo potrebujete napísať, aby ste zarovnali text na stred, šírku alebo okraje.

  Keď sa pustíme do práce, pozrime sa, ako vycentrovať text na tri rôzne cesty. Posledné dve sú prepojené priamo so štýlom. Môže to byť CSS súbor, ktorý sa pripája k stránkam webu a definuje ich vzhľad.

  Metóda 1 - priama práca s HTML

  Je to vlastne celkom jednoduché. Pozrite si príklad nižšie.

  Zarovnajte odsek na stred.

  Ak potrebujete presunúť fragmenty textu iným spôsobom, namiesto parametra „centrum“ zadajte nasledujúce hodnoty:

  • zarovnať – zarovnanie textu na šírku strany;
  • vpravo – na pravom okraji;
  • doľava - doľava.

  Analogicky môžete presunúť obsah, ktorý je v hlavičkách (h1, h2) a kontajneri (div).

  Metóda 2 a 3 - pomocou štýlov

  Vyššie uvedený dizajn sa môže mierne zmeniť. Účinok bude rovnaký. Ak to chcete urobiť, musíte napísať kód nižšie.

  Textový blok.

  V tejto forme sa kód zapíše priamo do HTML, aby sa vycentroval textový obsah.

  Existuje ďalší alternatívny spôsob, ako dosiahnuť výsledky. Budete musieť urobiť niekoľko krokov.

  Krok 1. V hlavnom kóde napíšte

  Textový materiál.

  Krok 2. V doplnku CSS súbor vstúpiť nasledujúci kód:

  Rovno (zarovnanie textu:na stred;)

  Podotýkam, že slovo „rovno“ je len názov triedy, ktorá sa dá nazvať inak. Toto je ponechané na uváženie programátora.

  Analogicky v HTML môžete text jednoducho vycentrovať, zarovnať a zarovnať k pravému alebo ľavému okraju stránky. Ako vidíte, existuje oveľa viac ako jedna možnosť, ako dosiahnuť svoj cieľ.

  Len pár otázok:

  • Robíte informačný neziskový projekt?
  • Chcete, aby sa vášmu webu darilo? vyhľadávače?
  • Chcete zarábať online?

  Ak sú všetky odpovede kladné, pozrite sa na integrovaný prístup k vývoju webových stránok. Informácie budú užitočné najmä vtedy, ak pracuje pre CMS WordPress.

  Upozorňujem, že vlastné webové stránky sú len jednou z mnohých možností, ako si na internete generovať pasívny alebo aktívny príjem. Môj blog je venovaný finančným príležitostiam online.

  Pracovali ste niekedy v oblasti dopravnej arbitráže, copywritingu a iných oblastiach činnosti, ktoré generujú primárny alebo dodatočný príjem prostredníctvom spolupráce na diaľku? O tom a ešte oveľa viac sa môžete dozvedieť práve teraz na stránkach môjho blogu.

  V budúcnosti ich zverejním ešte niekoľko užitočná informácia. Zostať v kontakte. Ak chcete, môžete sa prihlásiť na odber aktualizácií Workip e-mailom. Formulár predplatného sa nachádza nižšie.

  Úlohou veľmi často je zarovnať blok do stredu stránky/obrazovky, a to aj tak, že bez Java skriptu, bez nastavenia pevných rozmerov alebo záporných zarážok a tak, aby rolovacie lišty fungovali pre rodiča, ak blok prekročí svoju veľkosť . Na internete 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: Záporné odsadenie.

  Polohovanie blokovať atribúty hore a doľava o 50%, pričom výšku a šírku bloku vopred nastavíme záporná marža, ktorá je polovičná blokovať. Obrovské mínus túto možnosť je, že musíte počítať zápornú výplň. Tiež blokovať sa nespráva celkom správne, keď je obklopený posuvníkmi – je jednoducho odrezaný, pretože má záporné okraje.
  

  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ť nastaviť šírku a výšku, pozíciu s najvyššími atribútmi vpravo dole doľava 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 tuhé nastavenie rozmerov.
  

  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.

  Spýtajme sa rodičštýly tabuľky, bunka rodič Nastavte zarovnanie textu na stred. A blokovať nastavíme model čiarového bloku. Nevýhody, ktoré dostávame, sú nefunkčné posuvníky a vo všeobecnosti nie je 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 k tomuto príkladu pridať zvitok, budete musieť do návrhu 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é problémy. Ide o to, že rodič nastaviť štýly pseudo prvok predtým, konkrétne 100% výška, zarovnanie na stred a model inline bloku. Rovnako je to s blokovať model čiarového bloku je nastavený, vycentrovaný. Komu blokovať"nespadol" pod pseudo prvok, keď rozmery prvého sú väčšie ako rodič, uveďte rodič white-space: nowrap a font-size: 0, po ktorom blokovať zrušte tieto štýly nasledujúcim spôsobom - biele miesto: normálne. IN v tomto príklade font-size: 0 je potrebná na odstránenie výslednej medzery medzi rodič A blokovať kvôli formátovaniu kódu. Priestor môže byť odstránený inými spôsobmi, ale považuje sa za najlepšie sa mu jednoducho vyhnúť.
  

  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 (zobrazenie: blok; orámovanie: žiadne; ) )

  Alebo ak potrebujete, aby rodič zabral iba výšku a šírku okna a 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 ( zobrazenie: blok; orámovanie: žiadne; ) )

  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 je vysoko flexibilný. Jediná vec, ktorú stojí za to 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í štruktúrou, a nie je možné manipulovať s nadradeným prvkom, ale blok je potrebné nejako zarovnať. príde na pomoc css funkcia preložiť() . Hodnota 50% absolútneho umiestnenia umiestni ľavý horný roh bloku presne do stredu, potom záporná hodnota posunu posunie blok 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. Tiež podobný spôsob môže viesť k problémom s výpočtom polohy bloku pomocou java-scriptu. Niekedy na kompenzáciu straty 50 % šírky v dôsledku použitia vlastnosti CSS left môže pomôcť pravidlo špecifikované pre blok: margin- vpravo: -50 %;
  

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

  Možnosť 7. Tlačidlo.

  Používateľská možnosť azproduction kde blokovať orámované štítkom na gombík. Tlačidlo má vlastnosť centrovať všetko, čo sa v ňom nachádza, teda prvky inline a block-line (inline-block) modelu. V praxi neodporúčam používať.

  

  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 (zobrazenie: blok;; orámovanie: žiadne; ) )

  Bonus

  Pomocou myšlienky 4. možnosti môžete nastaviť vonkajšie okraje blokovať a ten bude primerane zobrazený obklopený posúvačmi.
  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.
  Príklad s veľkým obrázkom:

  Každý návrhár rozloženia neustále čelí potrebe zarovnať obsah do bloku: horizontálne alebo vertikálne. Existuje niekoľko dobrých článkov na túto tému, ale všetky ponúkajú veľa zaujímavých, ale málo praktických možností, a preto musíte venovať viac času zvýrazneniu hlavných bodov. Tieto informácie som sa rozhodol podať formou, ktorá mi vyhovuje, aby som už negúglil.

  Zarovnanie blokov so známymi veľkosťami

  Najjednoduchší spôsob použitia CSS je zarovnať bloky, ktoré majú známu výšku (pre vertikálne zarovnanie) alebo šírku (pre horizontálne zarovnanie).

  Zarovnanie pomocou vypchávok

  Niekedy nemôžete prvok vycentrovať, ale pridať k nemu okraje pomocou " vypchávka".

  Napríklad, existuje obrázok s rozmermi 200 x 200 pixelov a musíte ho vycentrovať do bloku s rozmermi 240 x 300. Môžeme nastaviť výšku a šírku vonkajšieho bloku = 200 pixelov a pridať 20 pixelov hore a dole a 50 vľavo a vpravo.

  .example-wrapper1 ( pozadie : #535E73 ; šírka : 200px ; výška : 200px ; výplň : 20px 50px ; )

  Zarovnanie absolútne umiestnených blokov

  Ak je blok nastavený na " pozícia: absolútna", potom ho možno umiestniť relatívne k svojmu najbližšiemu rodičovi pomocou "pozície: relatívne". Vyžaduje si to všetky vlastnosti (" top","správny","dno","vľavo") vnútorná jednotka priradiť rovnakú hodnotu, ako aj "margin: auto".

  *Je tu nuansa: Šírka (výška) vnútorného bloku + ľavá hodnota (vpravo, dole, hore) by nemala presiahnuť rozmery rodičovský blok. Bezpečnejšie je priradiť 0 (nula) vlastnostiam vľavo (vpravo, dole, hore).

  .example-wrapper2 ( pozícia : relatívna ; výška : 250px ; pozadie : url(medzera.jpg) ; ) .cat-kráľ (šírka : 200px ; výška : 200px ; pozícia : absolútna ; hore : 0 ; vľavo : 0 ; dole : 0 ; vpravo : 0 ; okraj : auto ; pozadie : url(kráľ.png) ; )

  Horizontálne zarovnanie

  Zarovnanie pomocou "text-align: center"

  Na zarovnanie textu v bloku existuje špeciálna vlastnosť " zarovnanie textu". Pri nastavení na " stred"Každý riadok textu bude zarovnaný vodorovne. Pri viacriadkovom texte sa toto riešenie používa veľmi zriedka, častejšie túto možnosť nájdeme pri zarovnávaní rozpätí, odkazov alebo obrázkov.

  Raz som musel vymyslieť nejaký text, aby som ukázal, ako funguje zarovnávanie textu pomocou CSS, ale nič zaujímavé ma nenapadlo. Najprv som sa rozhodol niekam skopírovať detskú riekanku, ale spomenul som si, že by to mohlo pokaziť jedinečnosť článku a naši milí čitatelia by ho na Googli nevedeli nájsť. A potom som sa rozhodol napísať tento odsek - koniec koncov, pointa nie je s ním, ale pointa je v zarovnaní.

  .example-text ( text-align : center ; padding : 10px ; background : #FF90B8 ; )

  Stojí za zmienku, že táto vlastnosť bude fungovať nielen pre text, ale aj pre akýkoľvek vložené prvky("displej: inline").

  Tento text je však zarovnaný doľava, ale nachádza sa v bloku, ktorý je vycentrovaný vzhľadom na obal.

  .example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; width : 40 % ; padding : 10px ; text-align : left ; background : #FFE5E5 ; )

  Zarovnanie blokov pomocou okraja

  Prvky bloku so známou šírkou možno jednoducho horizontálne zarovnať nastavením na „ľavý okraj: auto; pravý okraj: auto“. Zvyčajne sa používa skratka: " okraj: 0 auto" (namiesto nuly je možné použiť ľubovoľnú hodnotu). Táto metóda však nie je vhodná na vertikálne zarovnanie.

  .lama-wrapper ( height : 200px ; background : #F1BF88 ; ) .lama1 ( height : 200px ; width : 200px ; background : url(lama.jpg) ; margin : 0 auto ; )

  Takto by ste mali zarovnať všetky bloky tam, kde je to možné (kde sa nevyžaduje pevné alebo absolútne umiestnenie) – je to najlogickejšie a najprimeranejšie. Hoci sa to zdá byť samozrejmé, niekedy som videl desivé príklady s negatívnymi zarážkami, a tak som sa rozhodol objasniť.

  Vertikálne zarovnanie

  S vertikálne zarovnanie oveľa viac problémov - zjavne to nebolo zabezpečené v CSS. Existuje niekoľko spôsobov, ako dosiahnuť požadovaný výsledok, ale všetky nie sú príliš krásne.

  Zarovnanie s vlastnosťou výšky čiary

  V prípade, že je v bloku iba jeden riadok, môžete jeho vertikálne zarovnanie dosiahnuť pomocou " line-height" a nastavenie na požadovanú výšku. Pre spoľahlivosť sa oplatí nastaviť aj "výška", ktorej hodnota sa bude rovnať hodnote "line-height", pretože táto nie je podporovaná vo všetkých prehliadačoch.

  .example-wrapper4 ( line-height : 100px ; color : #DC09C0 ; background : #E5DAE1 ; height : 100px ; text-align : center ; )

  Je tiež možné dosiahnuť blokové zarovnanie pomocou niekoľkých čiar. Aby ste to dosiahli, budete musieť použiť ďalší obalový blok a nastaviť mu výšku riadku. Vnútorný blok môže byť viacriadkový, ale musí byť „inline“. Musíte naň použiť "vertical-align: middle".

  .example-wrapper5 ( line-height : 160px ; height : 160px ; font-size : 0 ; background : #FF9B00 ; ) .example-wrapper5 .text1 ( display : inline-block ; font-size : 14px-height: ; 1,5 ; zvislé zarovnanie : na stred ; pozadie : #FFFAF2 ; farba : #FF9B00 ; zarovnanie textu : na stred ; )

  Obalový blok musí mať nastavenú "veľkosť písma: 0". Ak veľkosť písma nenastavíte na nulu, prehliadač pridá pár pixelov navyše. Budete tiež musieť zadať veľkosť písma a výšku riadku pre vnútorný blok, pretože tieto vlastnosti sa dedia od rodiča.

  Vertikálne zarovnanie v tabuľkách

  Nehnuteľnosť " vertikálne zarovnať“ ovplyvňuje aj bunky tabuľky. C nastavená hodnota"stred", obsah vnútri bunky je zarovnaný na stred. Samozrejme, tabuľkové rozloženie sa teraz považuje za archaické, ale vo výnimočných prípadoch ho môžete simulovať zadaním " displej: tabuľka-bunka".

  Zvyčajne používam túto možnosť na vertikálne zarovnanie. Nižšie je uvedený príklad rozloženia prevzatého z dokončeného projektu. Zaujímavý je obraz, ktorý je takto vertikálne vycentrovaný.

  .one_product .img_wrapper ( display : table-cell ; height : 169px ; vertical-align : middle ; overflow : hidden ; background : #fff ; width : 255px ; ) .one_product img (max-height : 169px; max-width : 100px %; minimálna šírka: 140px; zobrazenie: blok; okraj: 0 automaticky; )

  Malo by sa pamätať na to, že ak má prvok nastavený „float“ iný ako „žiadny“, potom to bude v každom prípade blok (zobrazenie: blok) - potom budete musieť použiť ďalší obal bloku.

  Zarovnanie s ďalším vloženým prvkom

  A pre vložené prvky môžete použiť " vertikálne zarovnať: stred". Navyše všetky prvky s " displej: inline", ktoré sú na rovnakej čiare, sa zarovnajú so spoločnou stredovou čiarou.

  Musíte vytvoriť pomocný blok s výškou rovnajúcou sa výške nadradeného bloku, potom bude požadovaný blok vycentrovaný. Na tento účel je vhodné použiť pseudoprvky:pred alebo:po.

  .example-wrapper6 ( height : 300px ; text-align : center ; background : #70DAF1 ; ) .pudge ( display : inline-block ; vertical-align : middle ; background : url(pudge.png) ; background-color : # fff ; width : 200px ; height : 200px ; ) .riki ( display : inline-block ; height : 100 % ; vertical-align : middle ; )

  Displej: flex a zarovnanie

  Ak sa o používateľov Explorera 8 príliš nestaráte alebo vám na nich záleží natoľko, že ste pre nich ochotní vložiť kúsok javascriptu navyše, môžete použiť „display: flex“. Flex boxy sú skvelé pri riešení problémov so zarovnaním a stačí napísať „margin: auto“, aby sa obsah vycentroval.

  Doteraz som sa s touto metódou prakticky nikdy nestretol, no neexistujú pre ňu žiadne špeciálne obmedzenia.

  

  .example-wrapper7 ( display : flex ; height : 300px ; background : #AEB96A ; ) .example-wrapper7 img ( margin : auto ; )

  No a to je všetko o čom som chcel napísať CSS zarovnanie. Centrovanie obsahu teraz nebude problém!