Aspectul și alinierea la centru a paginilor site-ului este un efort creativ și provoacă adesea dificultăți începătorilor. Deci, să vedem cum se face. Să presupunem că vrem să facem o pagină cu următoarea structură:

Pagina noastră este formată din patru blocuri: antet, meniu, conținut și subsol. Pentru a centra pagina, vom pune aceste patru blocuri într-un singur bloc principal:

Antetul site-ului

Conţinut

Partea de jos a site-ului

Folosind această structură ca exemplu, vom lua în considerare mai multe opțiuni.

Dispunerea și centrarea unui site de cauciuc

La amenajarea unui site de cauciuc, unitatea principală de măsură utilizată este -%, deoarece locul ar trebui să se întindă pe lățime și să ocupe tot spațiul liber.

Prin urmare, lățimea blocurilor „antet” și „subsol” va fi de 100% din lățimea ecranului. Lățimea blocului „meniu” să fie de 30%, iar blocul „conținut” ar trebui să fie situat lângă blocul „meniu”, adică. trebuie să aibă o marjă stângă (margin-left) cu o lățime egală cu lățimea blocului „meniu”, adică. 30%.

Pentru a face blocurile „meniu” și „conținut” una lângă alta, să facem blocul „meniu” să plutească și să-l împingem spre marginea stângă. Vom seta și culorile de fundal pentru blocurile noastre. Acum să scriem toate acestea în foaia de stil (pe pagina style.css)

#header( background:#3e4982; width:100%; height:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #meniu( background:#6173cb; float :left; width:300px; text-align:center; #3e4982; width:100px;

Înălțimea blocurilor a fost stabilită condiționat, astfel încât rezultatul să fie vizibil. Uită-te la pagina noastră în browser:

Dacă modificați dimensiunea ferestrei browser, lățimea tuturor blocurilor se va modifica. Acest lucru nu este întotdeauna convenabil, deoarece... Când blocul de meniu este întins, apare spațiu gol. Prin urmare, lățimea blocului „meniu” este adesea fixă, așa că haideți să facem același lucru. Pentru a face acest lucru, înlocuiți valorile proprietăților corespunzătoare din foaia de stil:

... #meniu( fundal:#6173cb; float:stânga; lățime:200px; înălțime:300px; ) #conținut( fundal:#ffffff; margin-left:200px; înălțime:300px; ) ...

Acum pagina noastră se întinde mai natural. Cu aspectul fluid, paginile ocupă întreaga lățime a ecranului, așa că nu este necesară alinierea paginilor.

Dar dacă doriți, puteți face ca pagina dvs. să aibă o umplutură egală în stânga și dreapta ecranului. Pentru a face acest lucru, trebuie să adăugați un stil la blocul „principal”, care este un container pentru toate celelalte blocuri:

Acum pagina noastră arată astfel:

Dispunerea și centrarea site-ului, lățime fixă

În acest caz, va trebui să setăm dimensiuni fixe pentru blocurile noastre:

#principal( lățime:800px; ) #header( fundal:#3e4982; lățime:800px; înălțime:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #meniu ( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; înălțime:300px; text-align:center; dimensiune: 14px;

Acum pagina noastră este apăsată în marginea stângă a ecranului.

În acest caz, alinierea la centru a paginilor site-ului se poate face după cum urmează. Să ne amintim că pagina noastră are o etichetă „corp”, căreia i se poate atribui și o lățime și o umplutură.

Să facem asta: dați etichetei „body” o lățime de 800 de pixeli (cum ar fi blocul „principal”) și un padding-left de 50%. Apoi, întregul conținut al blocului „principal” va fi afișat în partea dreaptă a ecranului (adică de la mijloc la dreapta):

Pentru ca blocul nostru „principal” să fie situat în mijlocul ecranului, mijlocul său trebuie să coincidă cu mijlocul etichetei „corp”. Aceste. trebuie să mutați blocul „principal” la stânga cu jumătate din dimensiunea sa. Lățimea blocului „principal” este de 800 de pixeli, ceea ce înseamnă că trebuie să îi setați proprietatea „margin-left:-400px”. Da, această proprietate poate lua valori negative, apoi marginea din stânga este redusă (adică deplasată la stânga). Și exact de asta avem nevoie.

Foaia de stil arată acum astfel:

body( lățime:800px; padding-left:50%; ) #principal( lățime:800px; margin-left:-400px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center ; culoare:#FFFFFF; font-size:24px; padding-top:40px; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; lățime:800px;text-align:center;font-size:14px;

Și pagina noastră din browser se află exact în mijloc:

Ne-am uitat la două opțiuni pentru centrarea paginilor site-ului, de fapt, nu sunt dogme. Puteți experimenta și veni cu propria dvs. versiune, doar verificați cum funcționează în diferite browsere. Din păcate, ceea ce se afișează bine în FireFox sau Opera se poate afișa complet de neînțeles în IE și invers. Și trebuie să ne amintim asta.

Mult succes în căutarea ta creativă!

Buna ziua! Continuăm să stăpânim elementele de bază ale limbajului HTML. Să vedem ce trebuie să scrieți pentru a alinia textul la centru, lățime sau margini.

Trecând la treabă, să vedem cum să centrați textul în HTML în trei moduri diferite. Ultimele două sunt legate direct la foaia de stil. Poate fi un fișier CSS care se conectează la paginile site-ului și le definește aspectul.

De fapt, este destul de simplu. Vezi exemplul de mai jos.

Aliniați paragraful la centru.

Dacă trebuie să mutați fragmente de text într-un mod diferit, atunci în loc de parametrul „centru”, introduceți următoarele valori:

• justificare – alinierea textului la lățimea paginii;
• dreapta – pe marginea dreaptă;
• stânga - la stânga.

Prin analogie, puteți muta conținutul care se află în anteturi (h1, h2) și container (div).

Designul prezentat mai sus poate fi ușor transformat. Efectul va fi același. Pentru a face acest lucru, trebuie să scrieți codul de mai jos.

Bloc de text.

În această formă, codul este scris direct în HTML pentru a centra conținutul textului.

Există o altă modalitate alternativă de a obține rezultate. Va trebui să faceți câțiva pași.

Pasul 1. În codul principal scrieți

Material text.

Pasul 2. În fișierul CSS inclus, introduceți următorul cod:

Rovno (text-align:center;)

Observ că cuvântul „rovno” este doar numele unei clase care poate fi numită diferit. Acest lucru este lăsat la latitudinea programatorului.

Prin analogie, în HTML puteți face textul centrat, justificat și aliniat la marginea dreaptă sau stângă a paginii. După cum puteți vedea, există mult mai multe opțiuni pentru a vă atinge obiectivul.

Doar câteva întrebări:

• Faceți un proiect de informare non-profit?
• Vrei ca site-ul tău să se claseze bine în motoarele de căutare?
• Vrei să câștigi venituri online?

Dacă toate răspunsurile sunt pozitive, atunci priviți doar o abordare integrată a dezvoltării site-ului web. Informațiile vor fi deosebit de utile dacă rulează pe CMS-ul WordPress.

Aș dori să subliniez că propriile site-uri web sunt doar una dintre multele opțiuni pentru a genera venituri pasive sau active pe internet. Blogul meu este dedicat oportunităților financiare online.

Ați lucrat vreodată în domeniul arbitrajului de trafic, copywriting sau alte domenii de activitate care generează venituri primare sau suplimentare prin colaborare la distanță? Puteți afla despre asta și multe altele chiar acum pe paginile blogului meu.

Voi publica o mulțime de informații cu adevărat utile în viitor. Rămâneți conectat. Dacă doriți, vă puteți abona la actualizările Workip prin e-mail. Formularul de abonare se găsește mai jos.

Centrarea elementelor pe verticală folosind CSS este o sarcină care prezintă o anumită dificultate pentru dezvoltatori. Cu toate acestea, există mai multe metode de rezolvare, care sunt destul de simple. Această lecție prezintă 6 opțiuni pentru centrarea verticală a conținutului.

Să începem cu o descriere generală a problemei.

Centrarea orizontală este foarte simplă și ușoară. Când elementul centrat este inline, folosim proprietatea de aliniere relativă la elementul părinte. Când elementul este la nivel de bloc, îi setăm lățimea și setarea automată a marginilor din stânga și din dreapta.

Majoritatea oamenilor, când folosesc proprietatea text-align:, se referă la proprietatea vertical-align pentru centrarea verticală. Totul pare destul de logic. Dacă ați folosit șabloane de tabel, probabil că ați folosit pe scară largă atributul valign, ceea ce întărește credința că vertical-align este modalitatea corectă de a rezolva problema.

Dar atributul valign funcționează numai pe celulele tabelului. Și proprietatea de aliniere verticală este foarte asemănătoare cu aceasta. De asemenea, afectează celulele tabelului și unele elemente inline.

Valoarea proprietății de aliniere verticală este relativă la elementul inline părinte.

• Într-o linie de text, alinierea este relativă la înălțimea liniei.
• Celula tabelului folosește alinierea în raport cu o valoare calculată printr-un algoritm special (de obicei, înălțimea rândului).

Dar, din păcate, proprietatea vertical-align nu funcționează pe elementele la nivel de bloc (de exemplu, paragrafele din interiorul unui element div). Această situație poate face să se creadă că nu există o soluție la problema alinierii verticale.

Dar există și alte metode de centrare a elementelor bloc, a căror alegere depinde de ceea ce este centrat în raport cu containerul exterior.

Această metodă funcționează atunci când doriți să centrați vertical o linie de text. Tot ce trebuie să faceți este să setați înălțimea liniei să fie mai mare decât dimensiunea fontului.

În mod implicit, spațiul alb va fi distribuit uniform în partea de sus și de jos a textului. Și linia va fi centrată vertical. Adesea, înălțimea liniei este egală cu înălțimea elementului.

Text obligatoriu

#copil (înălțimea liniei: 200px; )

Această metodă funcționează în toate browserele, deși poate fi folosită doar pentru o singură linie. Valoarea 200 px din exemplu a fost aleasă în mod arbitrar. Puteți utiliza orice valoare mai mare decât dimensiunea fontului textului.

Ce se întâmplă dacă conținutul este o imagine? Va funcționa metoda de mai sus? Răspunsul se află într-o altă linie de cod CSS.

#parent ( line-height: 200px; ) #parent img ( vertical-align: middle; )

Valoarea proprietății line-height trebuie să fie mai mare decât înălțimea imaginii.

S-a menționat mai sus că proprietatea vertical-align este folosită pentru celulele tabelului, unde funcționează excelent. Putem afișa elementul nostru ca o celulă de tabel și putem folosi proprietatea de aliniere verticală pentru a centra vertical conținutul.

Notă: un tabel CSS nu este același lucru cu un tabel HTML.

Conţinut

#părinte (afișare: tabel;) #copil (afișare: tabel-celulă; vertical-align: mijloc; )

Setăm ieșirea tabelului la elementul div părinte și ieșim elementul div imbricat ca o celulă de tabel. Acum puteți utiliza proprietatea de aliniere verticală pe containerul interior. Totul din el va fi centrat vertical.

Spre deosebire de metoda de mai sus, în acest caz conținutul poate fi dinamic deoarece elementul div își va schimba dimensiunea în funcție de conținutul său.

Dezavantajul acestei metode este că nu funcționează în versiunile mai vechi de IE. Trebuie să utilizați proprietatea display: inline-block pentru containerul imbricat.

Această metodă funcționează și în toate browserele. Dar necesită ca elementului centrat să i se acorde o înălțime.

Exemplul de cod efectuează centrarea orizontală și verticală în același timp:

Conţinut

#părinte (poziție: relativ;) #copil (poziția: absolut; sus: 50%; stânga: 50%; înălțime: 30%; lățime: 50%; marjă: -15% 0 0 -25%; )

Mai întâi, setăm tipul de poziționare a elementului. Apoi, setăm proprietățile de sus și stânga ale elementului div imbricat la 50%, ceea ce corespunde centrului elementului părinte. Dar centrul este colțul din stânga sus al elementului imbricat. Prin urmare, trebuie să îl ridicați (jumătate din înălțime) și să îl mutați la stânga (jumătate din lățime), iar apoi centrul va coincide cu centrul elementului părinte. Deci este necesară cunoașterea înălțimii elementului în acest caz. Apoi setăm elementul cu margini negative de sus și stânga egale cu jumătate din înălțime și, respectiv, lățime.

Această metodă nu funcționează în toate browserele.

Exemplul de cod efectuează centrarea verticală și orizontală.

Conţinut

#părinte (poziție: relativă;) #copil (poziția: absolut; sus: 0; jos: 0; stânga: 0; dreapta: 0; lățime: 50%; înălțime: 30%; margine: auto; )

Ideea din spatele acestei metode este de a întinde elementul imbricat la toate cele 4 margini ale elementului părinte prin setarea proprietăților de sus, jos, dreapta și stânga la 0.

Setarea marginilor pentru a se genera automat pe toate părțile va seta valori egale pe toate cele 4 laturi și va centra elementul nostru div imbricat pe elementul său părinte.

Din păcate, această metodă nu funcționează în IE7 și mai jos.

În această metodă, umplutura egală este setată în mod explicit deasupra și sub elementul părinte.

Conţinut

#părinte ( umplutură: 5% 0; ) #copil ( umplutură: 10% 0; )

Exemplul de cod CSS setează umplutura de sus și de jos pentru ambele elemente. Pentru un element imbricat, setarea căptușelii va servi pentru a-l centra vertical. Și umplutura elementului părinte va centra elementul imbricat în el.

Unitățile de măsură relative sunt utilizate pentru a redimensiona dinamic elementele. Iar pentru unitățile de măsură absolute va trebui să faci calcule.

De exemplu, dacă elementul părinte are o înălțime de 400 px, iar elementul imbricat este de 100 px, atunci este nevoie de 150 px de umplutură în partea de sus și de jos.

150 + 150 + 100 = 400

Utilizarea % vă permite să lăsați calculele în seama browserului.

Această metodă funcționează peste tot. Dezavantajul este nevoia de calcule.

Notă: Această metodă funcționează prin setarea căptușelii exterioare a elementului. De asemenea, puteți utiliza margini în cadrul unui element. Decizia de a folosi margini sau padding trebuie luată în funcție de specificul proiectului.

Această metodă folosește un element div gol care plutește și ajută la controlul poziției elementului nostru imbricat în document. Rețineți că div-ul plutitor este plasat înaintea elementului nostru imbricat în codul HTML.

Conţinut

#părinte (înălțime: 250px;) #floater ( plutitor: stânga; înălțime: 50%; lățime: 100%; margine-jos: -50px; ) #copil (clar: ambele; înălțime: 100px; )

Compensam div-ul gol la stânga sau la dreapta și îi setăm înălțimea la 50% din elementul părinte. În acest fel, va umple jumătatea superioară a elementului părinte.

Deoarece acest div este plutitor, este eliminat din fluxul normal al documentului și trebuie să desfacem textul pe elementul imbricat. Exemplul folosește clear: both , dar este suficient să folosiți aceeași direcție ca și decalajul elementului div vid plutitor.

Marginea de sus a unui element div imbricat este direct sub marginea de jos a unui element div gol. Trebuie să mutăm elementul imbricat în sus cu jumătate din înălțimea elementului gol plutitor. Pentru a rezolva problema, utilizați o valoare negativă a proprietății marginii de jos pentru un element div vid plutitor.

Această metodă funcționează și în toate browserele. Cu toate acestea, utilizarea acestuia necesită un element div gol suplimentar și cunoașterea înălțimii elementului imbricat.

Toate metodele descrise sunt ușor de utilizat. Dificultatea este că niciuna dintre ele nu este potrivită pentru toate cazurile. Trebuie să analizați proiectul și să alegeți pe cel care se potrivește cel mai bine cerințelor.

Cred că mulți dintre voi care ați avut de-a face cu aspectul ați întâmpinat nevoia de a alinia elementele pe verticală și de a cunoaște dificultățile care apar la alinierea unui element la centru.

Da, pentru alinierea verticală există o proprietate specială de aliniere verticală în CSS cu mai multe valori. Cu toate acestea, în practică, nu funcționează deloc așa cum era de așteptat. Să încercăm să ne dăm seama.

Să comparăm următoarele abordări. Aliniați folosind:

• mese,
• indentare,
• înălțimea liniei
• întindere,
• marja negativa,
• transforma
• pseudo element
• flexbox.

Există două elemente div, unul dintre ele imbricat în celălalt. Să le dăm clasele corespunzătoare - exterioare și interioare.

Provocarea este de a alinia elementul interior cu centrul elementului exterior.

În primul rând, să luăm în considerare cazul când dimensiunile blocurilor externe și interne sunt cunoscute. Să adăugăm afișarea regulii: bloc inline la elementul interior și text-align: centru și vertical-align: mijloc la elementul exterior.

Amintiți-vă că alinierea se aplică numai elementelor care au un mod de afișare în linie sau bloc în linie.

Să setăm dimensiunile blocurilor, precum și culorile de fundal, astfel încât să le vedem marginile.

Exterior ( lățime: 200 px; înălțime: 200 px; aliniere text: centru; aliniere verticală: mijloc; culoarea fundalului: #ffc; ) .intern ( afișare: bloc inline; lățime: 100 px; înălțime: 100 px; culoarea fundalului : #fcc )
După aplicarea stilurilor, vom vedea că blocul interior este aliniat orizontal, dar nu vertical:
http://jsfiddle.net/c1bgfffq/

De ce sa întâmplat asta? Ideea este că proprietatea de aliniere verticală afectează alinierea elementului în sine, nu conținutul acestuia (cu excepția cazului în care este aplicată la celulele tabelului). Prin urmare, aplicarea acestei proprietăți elementului exterior nu a produs nimic. Mai mult, aplicarea acestei proprietăți unui element interior nu va face nimic, deoarece blocurile inline sunt aliniate vertical față de blocurile adiacente, iar în cazul nostru avem un bloc inline.

Există mai multe tehnici pentru a rezolva această problemă. Mai jos vom arunca o privire mai atentă asupra fiecăruia dintre ele.

Dezavantajul evident al acestei soluții este că, din punct de vedere semantic, este incorect folosirea tabelelor pentru aliniere. Al doilea dezavantaj este că crearea unui tabel necesită adăugarea unui alt element în jurul blocului exterior.

Primul minus poate fi eliminat parțial prin înlocuirea etichetelor table și td cu div și setarea modului de afișare a tabelului în CSS.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Cu toate acestea, blocul exterior va rămâne în continuare un tabel cu toate consecințele care decurg.

Exterior ( înălțime: 200px; ) .interior (înălțime: 100px; margine: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Dezavantajul soluției este că este aplicabilă doar într-un număr limitat de cazuri când se cunosc înălțimile ambelor blocuri.

Exterior ( înălțime: 200 px; înălțime linie: 200 px; ) . interior ( spațiu alb: nowrap; overflow: ascuns; )
http://jsfiddle.net/c1bgfffq/12/

Această tehnică poate fi, de asemenea, utilizată pentru a alinia textul cu mai multe linii dacă redefiniți valoarea înălțimii liniei pentru blocul interior și, de asemenea, adăugați afișarea: inline-block și vertical-align: reguli de mijloc.

Exterior ( înălțime: 200 px; înălțime linie: 200 px; ) . interior ( înălțime linie: normal; afișare: bloc în linie; aliniere verticală: mijloc; )
http://jsfiddle.net/c1bgfffq/15/

Dezavantajul acestei metode este că trebuie cunoscută înălțimea blocului exterior.

Pentru a face acest lucru aveți nevoie de:

Ideea din spatele acestei tehnici este că setarea unei înălțimi pentru un bloc întins și poziționat absolut face ca browserul să calculeze umplutura verticală într-un raport egal dacă este setat la automat.

Trebuie să dați poziționarea relativă a blocului extern și poziționarea absolută a blocului intern. Apoi, trebuie să mutați blocul interior în jos cu jumătate din înălțimea superioară a blocului exterior: 50% și să-l ridicați la jumătate din propria înălțime margine-top: -H interior / 2.

Exterior (poziție: relativă; ) .interior (înălțime: 100px; poziție: absolut; sus: 50%; margine-sus: -50px; )
http://jsfiddle.net/c1bgfffq/13/

Dezavantajul acestei metode este că trebuie cunoscută înălțimea unității interioare.

Exterior ( poziție: relativ; ) .intern ( poziție: absolut; sus: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

De ce nu a fost posibilă setarea valorii ca procent în metoda anterioară? Deoarece valorile procentuale ale marjei sunt calculate în raport cu elementul părinte, o valoare de 50% ar fi jumătate din înălțimea cutiei exterioare și ar trebui să ridicăm cutia interioară la jumătate din înălțimea proprie. Proprietatea de transformare este perfectă pentru aceasta.

Dezavantajul acestei metode este că nu poate fi folosită dacă unitatea interioară are poziționare absolută.

Blocul exterior trebuie setat să afișeze: flex și blocul interior la margine: auto . Și asta-i tot! Frumos, nu-i așa?

Exterior ( afișaj: flex; lățime: 200 px; înălțime: 200 px; ) . interior ( lățime: 100 px; margine: automat; )
http://jsfiddle.net/c1bgfffq/14/

Dezavantajul acestei metode este că Flexbox este acceptat doar de browserele moderne.

• Pentru a alinia vertical textul, este mai bine să utilizați indentări verticale sau proprietatea line-height.
• Pentru elementele poziționate absolut cu o înălțime cunoscută (de exemplu, pictograme), metoda cu o proprietate negativă margin-top este ideală.
• Pentru cazuri mai complexe, când înălțimea blocului este necunoscută, trebuie să utilizați un pseudo element sau proprietatea transform.
• Ei bine, dacă sunteți atât de norocos încât nu aveți nevoie să susțineți versiuni mai vechi ale browserului IE, atunci, desigur, este mai bine să utilizați Flexbox.

Foarte des în aspect este necesară centrarea unui element orizontal și/sau vertical. Prin urmare, am decis să fac un articol cu ​​moduri diferite de centrare, astfel încât totul să fie la îndemână într-un singur loc.

Alinierea orizontală folosind marginea este utilizată atunci când lățimea elementului centrat este cunoscută. Lucrări pentru elemente de bloc:

Element ( margine-stânga: automat; margine-dreapta: automat; lățime: 50%; )

Specificarea automată pentru marginile din dreapta și din stânga le face egale, ceea ce centrează elementul orizontal în blocul părinte.

Această metodă este potrivită pentru centrarea textului într-un bloc. text-align: center:

Aliniere cu text-align .wrapper ( text-align: center; )

Sunt aliniat la centru

Potrivit pentru centrarea blocurilor de lățime cunoscută. Oferim poziția blocului părinte: relativ la poziția relativ la acesta, poziția elementului centrat: absolut , stânga: 50% și o marjă negativă-stânga a cărei valoare este egală cu jumătate din lățimea elementului:

Alinierea folosind poziția .wrapper ( poziție: relativ; ) .wrapper p ( stânga: 50%; marjă: 0 0 0 -100px; poziție: absolut; lățime: 200px; )

Sunt aliniat la centru

Metoda este potrivită pentru alinierea blocurilor de lățime necunoscută, dar necesită un părinte de ambalare. De exemplu, puteți centra un meniu orizontal astfel:

Aliniere cu afișaj: inline-block + text-align: center;

• .navigation ( text-align: center; ) .navigation li ( display: inline-block; )
• Acasă

Linie de aliniere verticală-înălțime

Pentru a alinia o linie de text, puteți utiliza aceleași valori de înălțime și spațiere între rânduri pentru blocul părinte. Potrivit pentru butoane, elemente de meniu etc.

line-height .wrapper ( înălțime: 100px; line-height: 100px; )

poziție și marja negativă în sus

Un element poate fi aliniat vertical dându-i o înălțime fixă ​​și aplicând o poziție: absolută și o marjă negativă în sus egală cu jumătate din înălțimea elementului aliniat. Blocului părinte trebuie să i se atribuie poziția: relativă:

Wrapper ( poziție: relativă; ) elem ( înălțime: 200px; margine: -100px 0 0; poziție: absolut; sus: 50%; )

Pentru alinierea verticală, proprietatea display: table-cell este aplicată elementului, ceea ce îl forțează să emuleze o celulă de tabel. De asemenea, îi setăm înălțimea și alinierea verticală: mijloc . Să înfășurăm toate acestea într-un container cu proprietatea dislpay:; :

Afișare aliniere verticală: table-cell .wrapper ( afișare: tabel; lățime: 100%; ) .cell ( afișare: table-cell; înălțime: 100px; vertical-align: middle; )

line-height .wrapper ( înălțime: 100px; line-height: 100px; )

Am analizat modalități de a alinia elemente pe o pagină folosind CSS. Acum să aruncăm o privire la implementarea jQuery.

Să conectăm jQuery la pagină:

Vă sugerez să scrieți o funcție simplă pentru a centra un element pe pagină, să-l numim alignCenter() . Elementul în sine acționează ca un argument al funcției:

Funcția alignCenter(elem) ( // codează aici )

În corpul funcției, calculăm dinamic și atribuim coordonatele centrului paginii proprietăților CSS din stânga și de sus:

Funcția alignCenter(elem) ( elem.css(( stânga: ($(window).width() - elem.width()) / 2 + "px", sus: ($(window).height() - elem. height()) / 2 + "px" // nu uitați să adăugați poziție: absolută elementului pentru a declanșa coordonatele )) )

În prima linie a funcției, obținem lățimea documentului și scădem din el lățimea elementului, împărțit la jumătate - acesta va fi centrul orizontal al paginii. A doua linie face același lucru, doar cu înălțimea pentru alinierea verticală.

Funcția este gata, tot ce rămâne este să o atașați la evenimentele de pregătire DOM și de redimensionare a ferestrei:

$(function() ( // apelează funcția de centrare când DOM-ul este gata alignCenter($(elem)); // apelează funcția când redimensionează fereastra $(window).resize(function() ( alignCenter($(elem) )); )) // funcția de centrare a elementelor alignCenter(elem) ( elem.css(( // se calculează coordonatele stânga și sus la stânga: ($(window).width() - elem.width()) / 2 + " px", sus: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Noile funcții CSS3, cum ar fi Flexbox, devin treptat obișnuite. Tehnologia ajută la crearea de markup fără a utiliza floats, poziționare etc. Poate fi folosit și pentru centrarea elementelor. De exemplu, aplicați Flexbox elementului părinte.wrapper și centrați conținutul în interior:

Wrapper ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; înălțime: 500px; lățime: 500px; ) .wrapper .conținut ( marja: auto; /* margine: 0 auto numai orizontală */ /* margine: numai verticală */ ) Lorem ipsum dolor sit amet

Această regulă centrează elementul orizontal și vertical în același timp - marginea funcționează acum nu numai pentru alinierea orizontală, ci și pentru cea verticală. Și fără o lățime/înălțime cunoscută.