Pri rozvrhnutí stránky je často potrebné vykonať zarovnanie na stred spôsobom CSS: napríklad vycentrovať hlavný blok. Existuje niekoľko možností na vyriešenie tohto problému, z ktorých každý musí skôr alebo neskôr použiť akýkoľvek návrhár rozloženia.

Zarovnanie textu na stred

Často na dekoratívne účely chcete nastaviť zarovnanie textu na stred, CSS v tomto prípade umožňuje skrátiť čas rozloženia. Predtým sa to vykonávalo pomocou atribútov HTML, ale teraz štandard vyžaduje zarovnanie textu pomocou šablón štýlov. Na rozdiel od blokov, ktoré potrebujú zmeniť okraje, v CSS je zarovnanie textu vycentrované na jeden riadok:

• text-align:center;

Táto vlastnosť sa zdedí a prenáša z rodičov na všetky deti. Ovplyvňuje nielen text, ale aj iné prvky. Aby to bolo možné, musia byť vložené (napríklad span) alebo inline-block (všetky bloky, ktoré majú nastavenú vlastnosť display: block). Posledná možnosť tiež umožňuje zmeniť šírku a výšku prvku, flexibilnejšie upraviť zarážky.

Na stránkach sa zarovnanie často pripisuje samotnej značke. To okamžite robí kód neplatným, pretože W3C zastaralo atribút align. Použitie na stránke sa neodporúča.

Zarovnanie bloku na stred

Ak potrebujete vycentrovať div, CSS má celkom praktický spôsob: pomocou okrajov. Odsadenia je možné nastaviť pre blokové prvky aj pre inline-blokové prvky. Hodnota vlastnosti musí mať hodnoty 0 (vertikálne zarážky) a auto (automatické horizontálne zarážky):

• okraj:0 auto;

Teraz je táto možnosť uznaná ako absolútne platná. Používanie okrajov vám tiež umožňuje nastaviť zarovnanie obrázka na stred: umožňuje vám vyriešiť mnoho problémov spojených s umiestnením prvku na stránke.

Zarovnajte blok doľava alebo doprava

Niekedy nie je potrebné centrovanie spôsobom CSS, ale musíte umiestniť dva bloky vedľa seba: jeden na ľavý okraj, druhý na pravý. Na tento účel existuje vlastnosť float, ktorá môže nadobúdať jednu z troch hodnôt: left, right alebo none. Povedzme, že máte dva bloky, ktoré je potrebné umiestniť vedľa seba. Potom bude kód vyzerať takto:

• .left (float:left;)
• .right(float:right)

Ak existuje aj tretí blok, ktorý by mal byť umiestnený pod prvými dvoma blokmi (napríklad päta), potom je potrebné nastaviť vlastnosť clear:

• .left (float:left;)
• .right(float:right)
• päta (jasné: obe)

Faktom je, že bloky s triedami vľavo a vpravo vypadnú zo všeobecného toku, to znamená, že všetky ostatné prvky ignorujú samotnú existenciu zarovnaných prvkov. Vlastnosť clear:both umožňuje päte alebo akémukoľvek inému bloku vidieť prvky, ktoré vypadli z toku a zakazuje zalamovanie (plávanie) vľavo aj vpravo. Preto sa v našom príklade päta posunie nadol.

Vertikálne zarovnanie

Sú prípady, kedy nestačí nastaviť zarovnanie na stred spôsobmi CSS, ale treba zmeniť aj vertikálnu polohu podradeného bloku. Akýkoľvek vložený alebo vložený prvok môže byť zarovnaný s hornou alebo spodnou časťou, môže byť v strede nadradeného prvku alebo v akejkoľvek polohe. Najčastejšie je potrebné blok vycentrovať, čo sa robí pomocou atribútu vertical-align. Povedzme, že existujú dva bloky, jeden vnorený do druhého. V tomto prípade je vnútorný blok prvkom inline-block (zobrazenie: inline-block). Podradený blok musíte zarovnať vertikálne:

• zarovnanie hore - .child(vertical-align:top);
• zarovnanie na stred - .child(vertical-align:middle);
• zarovnanie dole - .child(vertical-align:bottom);

Prvky na úrovni bloku nie sú ovplyvnené zarovnaním textu ani zvislým zarovnaním.

Možné problémy so zarovnanými blokmi

Niekedy môže centrovanie prvku div spôsobom CSS spôsobiť malé problémy. Napríklad pri použití float: povedzme, že existujú tri bloky: .prvý, .druhý a .tretí. Druhý a tretí blok leží v prvom. Prvok s triedou second je zarovnaný doľava a posledný blok je zarovnaný doprava. Po vyrovnaní obaja vypadli z potoka. Ak nadradený prvok nemá nastavenú výšku (napríklad 30em), tak sa už nenatiahne do výšky podradených blokov. Aby sa tejto chybe vyhli, používajú „medzerník“ – špeciálny blok, ktorý vidí .sekundu a .tretinu. CSS kód:

• .second(float:left)
• .third(float:right)
• .clearfix(výška:0; jasná: obe;)

Často sa používa pseudotrieda :after, ktorá vám tiež umožňuje vrátiť bloky na miesto vytvorením pseudo medzerníka (v príklade sa prvok div s triedou kontajnera nachádza vo vnútri .first a obsahuje .left a .right):

• .left(float:left)
• .right(float:right)
• .container:after(content:""; display:table; clear:both;)

Vyššie uvedené možnosti sú najbežnejšie, aj keď existuje niekoľko variácií. Vždy môžete nájsť najjednoduchší a najpohodlnejší spôsob, ako vytvoriť pseudo spacer prostredníctvom experimentovania.

Ďalším problémom, s ktorým sa dizajnéri rozloženia často stretávajú, je zarovnanie prvkov inline-block. Za každým z nich sa automaticky pridá medzera. S tým sa pomáha vyrovnať vlastnosť margin, ktorá je nastavená na záporný margin. Existujú aj iné spôsoby, ktoré sa používajú oveľa menej často: napríklad nulovanie V tomto prípade sa vo vlastnostiach nadradeného prvku zapíše font-size:0. Ak sa vo vnútri blokov nachádza text, požadovaná veľkosť písma je už vrátená vo vlastnostiach prvkov vloženého bloku. Napríklad veľkosť písma: 1 em. Metóda nie je vždy vhodná, takže možnosť s vonkajšími zárezmi sa používa oveľa častejšie.

Zarovnanie blokov vám umožňuje vytvárať krásne a funkčné stránky: toto je rozloženie všeobecného rozloženia, umiestnenie tovaru v internetových obchodoch a fotografie na stránke vizitky.

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

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

Veľmi často je v rozložení potrebné vycentrovať nejaký prvok horizontálne a/alebo vertikálne. Preto som sa rozhodol spraviť článok s rôznymi spôsobmi centrovania, aby bolo všetko po ruke na jednom mieste.

Horizontálne zarovnanie

okraj: auto

Horizontálne zarovnanie s okrajom sa používa, keď je známa šírka centrovaného prvku. Funguje pre blokové prvky:

Prvok ( ľavý okraj: automaticky; pravý okraj: automaticky; šírka: 50 %; )

Zadaním automatickej hodnoty pravého a ľavého výplne budú rovnaké, čím sa prvok vycentruje horizontálne v rámci nadradeného bloku.

zarovnanie textu: na stred

Táto metóda je vhodná na centrovanie textu v rámci bloku. zarovnanie textu: na stred:

pozíciu a záporný okraj vľavo

Vhodné pre centrované bloky známej šírky. Rodičovský blok nastavíme na pozíciu: relatívne k pozícii voči nej, vycentrovaný prvok na pozíciu: absolútnu , ľavý: 50 % a záporný okraj-ľavý , ktorého hodnota sa rovná polovici šírky prvku:

zobrazenie: inline-block + text-align: center

Metóda je vhodná na zarovnanie blokov neznámej šírky, ale vyžaduje nadradený obal. Takto môžete napríklad vycentrovať horizontálnu ponuku:

• Domov
• o autorovi

Vertikálne zarovnanie

line-height

Ak chcete zarovnať jeden riadok textu, môžete použiť rovnaké hodnoty výšky a riadkov pre nadradený blok. Vhodné pre tlačidlá, položky ponuky atď.

pozíciu a zápornú maržu nahor

Prvok možno vertikálne zarovnať tak, že mu dáte pevnú výšku a použijete polohu: absolútnu a zápornú hranicu rovnú polovici výšky zarovnávaného prvku. Rodičovský blok by mal mať pozíciu: relatívny:

Wrapper ( pozícia: relatívna; ) prvok ( výška: 200 pixelov; okraj: -100 pixelov 0 0; pozícia: absolútna; hore: 50 %; )

Pomocou polohovania a záporných okrajov teda môžete prvok na stránke vycentrovať.

displej: tabuľka-bunka

V prípade vertikálneho zarovnania sa na prvok aplikuje vlastnosť display: table-cell, vďaka čomu emuluje bunku tabuľky. Nastavíme aj výšku a vertikálne zarovnáme: stred. Toto všetko zabalíme do kontajnera s vlastnosťou dislpay: tabuľka; :

Dynamicky zarovnajte prvok na stránke

Pozreli sme sa na spôsoby, ako zarovnať prvky na stránke pomocou CSS. Teraz sa pozrime na implementáciu jQuery.

Pridajme jQuery na stránku:

Navrhujem napísať jednoduchú funkciu na vycentrovanie prvku na stránke, nazvime ju alignCenter() . Samotný prvok funguje ako argument funkcie:

Funkcia alignCenter(elem) ( // kód tu )

V tele funkcie dynamicky vypočítajte a priraďte súradnice stredu stránky vlastnostiam CSS vľavo a hore:

Funkcia alignCenter(elem) ( elem.css(( left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - el. height()) / 2 + "px" // nezabudnite k prvku pridať position: absolute, aby sa spustili súradnice )) )

V prvom riadku funkcie dostaneme šírku dokumentu a odpočítame od nej šírku prvku, rozdeleného na polovicu - to bude horizontálny stred stránky. Druhý riadok robí to isté, len s výškou, ktorá sa má zarovnať vertikálne.

Funkcia je pripravená, zostáva ju zavesiť na udalosti pripravenosti DOM a zmeny veľkosti okna:

$(function() ( // volanie funkcie centrovania, keď je DOM pripravený alignCenter($(elem)); // volanie funkcie, keď sa zmení veľkosť okna $(window).resize(function() ( alignCenter($( elem)); )) // funkcia centrovania prvku alignCenter(elem) ( elem.css(( // výpočet ľavých a horných súradníc vľavo: ($(window).width() - elem.width()) / 2 + "px", hore: ($(window).height() - elem.height()) / 2 + "px" ))) ) ))

Aplikácia Flexboxu

Nové funkcie CSS3, ako je Flexbox, sa postupne dostávajú do hlavného prúdu. Táto technológia pomáha vytvárať značky bez použitia plavákov, polohovania atď. Dá sa použiť aj na vycentrovanie prvkov. Napríklad, aplikujme Flexbox na nadradený prvok .wrapper a vycentrujeme obsah vnútri:

Wrapper ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; výška: 500px; šírka: 500px; ) .wrapper .content ( okraj: auto; /* okraj: 0 automatický; iba horizontálny */ /* okraj: automatický 0; iba zvislý */ )

Toto pravidlo vycentruje prvok súčasne horizontálne a vertikálne - margin teraz funguje nielen pre horizontálne, ale aj pre vertikálne zarovnanie. A bez známej šírky/výšky.

Súvisiace zdroje

Pomôžte projektu

Myslím si, že mnohí z vás, ktorí ste robili práce s rozložením, sa stretli s potrebou zarovnať prvky vertikálne a viete, aké ťažkosti vznikajú pri zarovnávaní prvku na stred.

Áno, pre vertikálne zarovnanie v CSS existuje špeciálna vlastnosť vertikálneho zarovnania s mnohými hodnotami. V praxi to však nefunguje podľa predstáv. Skúsme na to prísť.

Porovnajme nasledujúce prístupy. Zarovnanie s:

• stoly,
• odsadenie,
• výška riadku,
• strečing,
• záporná marža,
• transformovať,
• pseudo prvok
• flexbox.

Ako ilustráciu si predstavte nasledujúci príklad.

Existujú dva prvky div, pričom jeden je vnorený do druhého. Dajme im vhodné triedy – vonkajšie a vnútorné .

Cieľom je zarovnať vnútorný prvok do stredu vonkajšieho prvku.

Na začiatok zvážte prípad, keď veľkosti vonkajšieho a vnútorného bloku známy. Pridajme display: inline-block k vnútornému prvku a text-align: center a vertical-align: middle k vonkajšiemu prvku.

Pamätajte, že zarovnanie sa vzťahuje iba na prvky, ktoré majú režim zobrazenia vnorený alebo vložený blok.

Nastavme veľkosti blokov, ako aj farby pozadia, aby sme videli ich okraje.

Vonkajšie ( šírka: 200px; výška: 200px; zarovnanie textu: na stred; zvislé zarovnanie: na stred; farba pozadia: #ffc; ) .vnútorné ( displej: inline-block; šírka: 100px; výška: 100px; farba pozadia : #fcc ;)
Po použití štýlov uvidíme, že vnútorný blok je zarovnaný horizontálne, ale nie vertikálne:
http://jsfiddle.net/c1bgfffq/

Prečo sa to stalo? Faktom je, že vlastnosť vertical-align ovplyvňuje zarovnanie samotný prvok, nie jeho obsah(okrem prípadov, keď sa použije na bunky tabuľky). Preto aplikovanie tejto vlastnosti na vonkajší prvok neurobilo nič. Navyše, aplikácia tejto vlastnosti na vnútorný prvok tiež neurobí nič, pretože inline bloky sú vertikálne zarovnané so susednými blokmi a v našom prípade máme jeden inline blok.

Na vyriešenie tohto problému existuje niekoľko techník. Pozrime sa bližšie na každý z nich nižšie.

Zarovnanie s tabuľkou

Prvé riešenie, ktoré prichádza na myseľ, je nahradiť vonkajší blok jednobunkovým stolom. V tomto prípade sa zarovnanie použije na obsah bunky, teda na vnútorný blok.

http://jsfiddle.net/c1bgfffq/1/

Zjavnou nevýhodou tohto riešenia je, že z hľadiska sémantiky je nesprávne používať tabuľky na zarovnávanie. Druhou nevýhodou je, že na vytvorenie tabuľky je potrebné pridať ešte jeden prvok okolo vonkajšieho bloku.

Prvé mínus sa dá čiastočne odstrániť nahradením tagov table a td za div a nastavením režimu zobrazenia tabuľky v CSS.

.vonkajší obal ( displej: tabuľka; ) .vonkajší ( displej: bunka tabuľky; )
Vonkajší blok však stále zostane stolom so všetkými z toho vyplývajúcimi dôsledkami.

Zarovnanie s výplňou

Ak sú známe výšky vnútorného a vonkajšieho bloku, potom je možné zarovnanie nastaviť pomocou vertikálnej výplne vnútorného bloku pomocou vzorca: (H vonkajšie - H vnútorné) / 2.

Vonkajšie ( výška: 200px; ) .vnútorné (výška: 100px; okraj: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Nevýhodou riešenia je, že je použiteľné len v obmedzenom počte prípadov, keď sú známe výšky oboch blokov.

Zarovnanie s výškou čiary

Ak viete, že vnútorný blok by nemal zaberať viac ako jeden riadok textu, môžete použiť vlastnosť line-height a nastaviť ju na rovnakú výšku ako výška vonkajšieho bloku. Keďže obsah vnútorného bloku by sa nemal zalamovať do druhého riadku, odporúča sa pridať aj medzery: nowrap a overflow: skryté pravidlá.

Vonkajšie ( výška: 200px; výška riadku: 200px; ) .vnútorné (biele miesto: nowrap; pretečenie: skryté; )
http://jsfiddle.net/c1bgfffq/12/

Túto techniku ​​je možné použiť aj na zarovnanie viacriadkového textu, ak prepíšete hodnotu výšky riadka pre vnútorný blok a pridáte zobrazenie pravidiel: inline-block a vertical-align: middle .

Vonkajšie ( height: 200px; line-height: 200px; ) .inner ( line-height: normal; display: inline-block; vertical-align: middle; )
http://jsfiddle.net/c1bgfffq/15/

Nevýhodou tejto metódy je, že musí byť známa výška vonkajšieho bloku.

Stretch Alignment

Túto metódu možno použiť, keď výška vonkajšieho bloku nie je známa, ale výška vnútorného bloku je známa.

Na to potrebujete:

1. nastavenie relatívnej polohy k vonkajšiemu bloku a absolútnej polohy k vnútornému bloku;
2. pridajte pravidlá horná: 0 a spodná: 0 k vnútornému bloku, v dôsledku čoho sa roztiahne na celú výšku vonkajšieho bloku;
3. nastavte hodnotu na auto pre zvislé čalúnenie vnútorného bloku.

.vonkajšia ( pozícia: relatívna; ) .vnútorná ( výška: 100px; pozícia: absolútna; hore: 0; dole: 0; okraj: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Podstata tejto techniky spočíva v tom, že nastavenie výšky pre natiahnutý a absolútne umiestnený blok spôsobí, že prehliadač vypočíta zvislé odsadenie v rovnakých pomeroch, ak je ich hodnota nastavená na auto.

Zarovnanie so záporným okrajom-vrchol

Táto metóda sa stala všeobecne známou a používa sa veľmi často. Rovnako ako predchádzajúci sa aplikuje, keď nie je známa výška vonkajšieho bloku, ale je známa výška vnútorného.

Vonkajší blok musíte nastaviť na relatívne umiestnenie a vnútorný blok na absolútne umiestnenie. Potom musíte posunúť vnútornú krabicu nadol o polovicu výšky hornej časti vonkajšej krabice: 50 % a posunúť ju nahor o polovicu jej vlastnej výšky okraj-hor: -H vnútorné / 2.

Vonkajšia ( pozícia: relatívna; ) .vnútorná ( výška: 100 pixelov; pozícia: absolútna; horná časť: 50 %; okraj navrchu: -50 pixelov; )
http://jsfiddle.net/c1bgfffq/13/

Nevýhodou tejto metódy je, že musí byť známa výška vnútornej jednotky.

Zarovnanie s transformáciou

Táto metóda je podobná predchádzajúcej, ale môže sa použiť, keď nie je známa výška vnútorného bloku. V tomto prípade namiesto nastavenia zápornej výplne v pixeloch môžete použiť vlastnosť transform a zdvihnúť vnútorný rámček pomocou funkcie translateY a hodnoty -50 % .

Vonkajšia ( pozícia: relatívna; ) .vnútorná ( pozícia: absolútna; horná: 50 %; transformácia: preložiťY(-50 %); )
http://jsfiddle.net/c1bgfffq/9/

Prečo v predchádzajúcej metóde nebolo možné nastaviť hodnotu v percentách? Keďže percentuálne hodnoty vlastnosti margin sú relatívne k rodičovskému prvku, hodnota 50 % by sa rovnala polovici výšky vonkajšieho rámčeka a vnútorný rámček by sme museli zvýšiť o polovicu jeho vlastnej výšky. Presne na to slúži vlastnosť transform.

Nevýhodou tejto metódy je, že ju nemožno použiť, ak má vnútorný blok absolútne polohovanie.

Zarovnanie s Flexboxom

Najmodernejším spôsobom vertikálneho zarovnania je použitie flexibilného rozloženia boxu (populárne známeho ako Flexbox). Tento modul umožňuje flexibilne ovládať umiestnenie prvkov na stránke a umiestniť ich takmer kdekoľvek. Zarovnanie na stred pre Flexbox je veľmi jednoduchá úloha.

Vonkajší blok musí byť nastavený na zobrazenie: flex a vnútorný blok musí byť nastavený na margin: auto. A to je všetko! Nádhera, však?

Vonkajšie ( displej: flex; šírka: 200px; výška: 200px; ) .vnútorné (šírka: 100px; okraj: auto; )
http://jsfiddle.net/c1bgfffq/14/

Nevýhodou tejto metódy je, že Flexbox podporujú iba moderné prehliadače.

Ktorý spôsob si vybrať?

Je potrebné vychádzať z vyjadrenia problému:

• Na vertikálne zarovnanie textu je lepšie použiť zvislé odsadenie alebo vlastnosť line-height.
• Pre absolútne umiestnené prvky so známou výškou (ako sú ikony) je ideálny prístup so záporným okrajom.
• Pre zložitejšie prípady, kde výška bloku nie je známa, by sa mal použiť pseudoprvok alebo vlastnosť transform.
• No, ak máte to šťastie, že nepotrebujete podporovať staršie verzie IE, potom je samozrejme lepší Flexbox.

Štítky: Pridajte štítky

Ahoj! Pokračujeme v ovládaní základov jazyka 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 v HTML tromi rôznymi spôsobmi. Posledné dva priamo súvisia so štýlom. Môže to byť CSS súbor, ktorý je pripojený k stránkam webu a nastavuje ich vzhľad.

Metóda 1 - pracujte priamo s HTML

V skutočnosti je všetko celkom jednoduché. Pozrite si príklad nižšie.

Zarovnajte odsek na stred.

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

• zarovnať - zarovnanie textu na šírku strany;
• vpravo - na pravom okraji;
• vľavo - vľavo.

Analogicky môžete presunúť obsah, ktorý je v hlavičkách (h1, h2), 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ýsledok. Budete musieť urobiť niekoľko vecí.

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

Textový materiál.

Krok 2. V priloženom súbore CSS zadajte 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 ľahko vycentrovať text, zarovnať ho a zarovnať na pravú alebo ľavú stranu stránky. Ako vidíte, nie je ani zďaleka jedna možnosť na dosiahnutie cieľa.

Len pár otázok:

• Robíte informačný nekomerčný projekt?
• Chcete, aby sa vaša stránka dobre umiestnila vo vyhľadávačoch?
• 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 fungujú na CMS WordPress.

Chcel by som poznamenať, že vaše vlastné stránky sú len jednou z mnohých možností na generovanie pasívnych alebo aktívnych príjmov na internete. Môj blog je len o finančných možnostiach na internete.

Pracovali ste niekedy v oblasti dopravnej arbitráže, copywritingu a iných činností, ktoré prinášajú hlavný alebo doplnkový príjem so spoluprácou na diaľku? To a ešte oveľa viac sa dozviete práve teraz na stránkach môjho blogu.

Dopredu zverejním veľa skutočne užitočných informácií. 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.