Alinierea div. Alinierea verticală în div

Vlad Merjevici

Datorită faptului că conținutul celulelor tabelului poate fi aliniat simultan pe orizontală și pe verticală, posibilitățile de control al poziției elementelor unul față de celălalt sunt extinse. Tabelele vă permit să setați alinierea imaginilor, textului, câmpurilor de formular și a altor elemente unul față de celălalt și cu pagina web în ansamblu. În general, alinierea este necesară în principal pentru a stabili conexiuni vizuale între diferite elemente, precum și pentru a le grupa.

Centrare pe verticală

O modalitate de a arăta vizitatorului focalizarea și numele site-ului este utilizarea unei pagini de start. Aceasta este prima pagină pe care, de regulă, există un ecran de splash flash sau o imagine care exprimă ideea principală a site-ului. Imaginea este, de asemenea, un link către alte secțiuni ale site-ului. Trebuie să plasați această imagine în centrul ferestrei browserului, indiferent de rezoluția monitorului. În acest scop, puteți utiliza un tabel cu lățimea și înălțimea de 100% (exemplul 1).

Exemplul 1: Centrarea desenului

Aliniere TABLE ( lățime: 100%; /* Lățime tabel */ înălțime: 100%; /* Înălțime tabel */ )

În acest exemplu, alinierea orizontală este setată utilizând parametrul etichetei align="center". , iar conținutul celulei poate să nu fie centrat vertical, deoarece aceasta este poziția implicită.

Pentru a seta înălțimea mesei la 100%, trebuie să eliminați , codul nu va mai fi valabil.

Utilizarea lățimii și înălțimii pentru a acoperi întreaga zonă disponibilă a paginii web asigură că conținutul tabelului va fi aliniat exact în centrul ferestrei browserului, indiferent de dimensiunea acestuia.

Aliniere orizontala

Prin combinarea atributelor align (aliniere orizontală) și valign (aliniere verticală) ale etichetei , este permisă setarea mai multor tipuri de poziții ale elementelor unul față de celălalt. În fig. Figura 1 prezintă modalități de aliniere orizontală a elementelor.

Să ne uităm la câteva exemple de aliniere a textului conform figurii de mai jos.

Alinierea de sus

Pentru a specifica alinierea superioară a conținutului celulei, pentru o etichetă trebuie să setați atributul valign cu valoarea de sus (exemplul 2).

Exemplul 2: Utilizarea valign

Aliniere

Coloana 1

Coloana 2

În acest exemplu, caracteristicile celulei sunt controlate folosind parametrii etichetei , dar este și mai convenabil să schimbați prin stiluri. În special, alinierea în celule este specificată de proprietățile vertical-align și text-align (exemplul 3).

Exemplul 3: aplicarea stilurilor pentru aliniere

Aliniere TABLE ( lățime: 100%; /* Lățime tabel */ ) #col1 ( lățime: 75%; /* Lățime prima coloană */ fundal: #f0f0f0; /* Culoarea fundalului primei coloane */ ) #col2 ( lățime: 25 %; /* Lățimea celei de-a doua coloane */ fundal: #fc5; /* Culoare de fundal a celei de-a doua coloane */ text-align: right; /* Aliniere la dreapta */ ) #col1, #col2 ( vertical-align: top ; / * Alinierea superioară */ padding: 5px; /* Margini din jurul conținutului celulei */ )

Coloana 1

Coloana 2

Pentru a scurta codul, acest exemplu folosește gruparea selectoarelor, deoarece proprietățile de aliniere verticală și de umplutură sunt aplicate la două celule în același timp.

Alinierea de jos se face în același mod, dar în loc de valoarea de sus, se folosește partea de jos.

Alinierea la centru

În mod implicit, conținutul celulei este aliniat la centrul liniei lor verticale, așa că dacă coloanele au înălțimi diferite, trebuie să setați alinierea la marginea de sus. Uneori mai trebuie să părăsiți metoda de aliniere inițială, de exemplu, când plasați formule, așa cum se arată în Fig. 2.

În acest caz, formula este situată strict în centrul ferestrei browserului, iar numărul acesteia este situat pe marginea dreaptă. Pentru a aranja elementele în acest fel, veți avea nevoie de un tabel cu trei celule. Celulele exterioare ar trebui să aibă aceleași dimensiuni, în celula din mijloc alinierea este centrată, iar în celula din dreapta - de-a lungul marginii din dreapta (exemplul 4). Acest număr de celule este necesar pentru a vă asigura că formula este poziționată în centru.

Exemplul 4: Alinierea formulei

Aliniere

(18.6)

În acest exemplu, prima celulă a tabelului este lăsată goală; servește doar la crearea unei indentări, care, apropo, poate fi setată și folosind stiluri.

Alinierea elementelor de formular

Folosind tabele, este convenabil să determinați poziția câmpurilor de formular, mai ales atunci când acestea sunt intercalate cu text. Una dintre opțiunile de proiectare pentru formular, care este destinată introducerii unui comentariu, este prezentată în Fig. 3.

Pentru a vă asigura că textul de lângă câmpurile formularului este aliniat la dreapta și elementele formularului în sine sunt aliniate la stânga, veți avea nevoie de un tabel cu un chenar invizibil și două coloane. Coloana din stânga va conține textul în sine, iar coloana din dreapta va conține câmpuri de text (exemplul 5).

Exemplul 5: Alinierea câmpurilor de formular

Aliniere

Nume
E-mail
Un comentariu

În acest exemplu, pentru acele celule în care este necesară alinierea corectă, este adăugat atributul align="right". Pentru a vă asigura că eticheta Comentariu este poziționată în partea de sus a textului cu mai multe linii, celula corespunzătoare este setată la alinierea sus folosind atributul valign.

Există mai multe moduri fundamental diferite de a centra un obiect pe verticală folosind CSS, dar alegerea celui potrivit poate fi dificilă. Ne vom uita la unele dintre ele și, de asemenea, vom face un mic site web folosind cunoștințele acumulate.

Alinierea pe centru vertical nu este ușor de realizat folosind CSS. Există multe moduri și nu toate funcționează în toate browserele. Să ne uităm la 5 metode diferite și la avantajele și dezavantajele fiecăreia. Exemplu.

1a metoda

Această metodă presupune că setăm un element pentru a fi afișat ca tabel, apoi putem folosi proprietatea vertical-align pe el (care funcționează diferit în diferite elemente).

Câteva informații utile care ar trebui să fie centrate. #wrapper( afișare: tabel; ) #celulă (afișare: tabel-celulă; aliniere verticală: mijloc; )

pro

• Conținutul se poate schimba dinamic înălțimea (înălțimea nu este definită în CSS).
• Conținutul nu este întrerupt dacă nu există spațiu suficient pentru el.

Minusuri

• Nu funcționează în IE 7 sau mai puțin
• O mulțime de etichete imbricate

a 2-a metoda

Această metodă folosește poziționarea absolută a div-ului, cu partea superioară setată la 50% și margine-top minus jumătate din înălțimea conținutului. Aceasta implică faptul că obiectul trebuie să aibă o înălțime fixă, care este definită în stilurile CSS.

Deoarece înălțimea este fixă, puteți seta overflow:auto; pentru un div care conține conținut, astfel, dacă conținutul nu se potrivește, vor apărea bare de defilare.

Conținut aici #conținut ( poziție: absolut; sus: 50%; înălțime: 240px; margin-sus: -120px; /* minus jumătate din înălțime */ )

pro

• Funcționează în toate browserele.
• Nu există cuibări inutile.

Minusuri

• Când nu este suficient spațiu, conținutul dispare (de exemplu, div-ul este în interiorul corpului și utilizatorul a făcut ferestrele mai mici, caz în care barele de defilare nu vor apărea.

a 3-a metoda

În această metodă, vom încheia conținutul div cu un alt div. Să-i setăm înălțimea la 50% (înălțime: 50%;) și marginea de jos la jumătate din înălțime (margin-bottom:-contentheight;). Conținutul va pluti și va fi centrat.

aici este conținutul #floater( float: stânga; înălțime: 50%; margin-bottom: -120px; ) #conținut( clar: ambele; înălțime: 240px; poziție: relativă; )

pro

• Funcționează în toate browserele.
• Când nu există suficient spațiu (de exemplu, când fereastra este redusă), conținutul nu este decupat, vor apărea bare de defilare.

Minusuri

• Nu mă pot gândi decât la un singur lucru: că se folosește un element gol suplimentar.

Metoda a 4-a.

Această metodă utilizează proprietatea position:absolute;. pentru un div cu dimensiuni fixe (lățime și înălțime). Apoi îi setăm coordonatele de sus:0; jos:0; , dar din moment ce are o înălțime fixă, nu se poate întinde și este aliniată la centru. Aceasta este foarte asemănătoare cu metoda binecunoscută de centrare orizontală a unui element bloc cu lățime fixă ​​(marja: 0 auto;).

Informații importante. #conținut( poziție: absolut; sus: 0; jos: 0; stânga: 0; dreapta: 0; margine: automat; înălțime: 240px; lățime: 70%; )

pro

• Foarte simplu.

Minusuri

• Nu funcționează în Internet Explorer
• Conținutul va fi tăiat fără bare de defilare dacă nu există suficient spațiu în container.

a 5-a metoda

Folosind această metodă, puteți alinia centrat o linie de text. Pur și simplu setăm înălțimea textului (linie-înălțime) egală cu înălțimea elementului (înălțimea). După aceasta, linia va fi afișată în centru.

O anumită linie de text #conținut( înălțime: 100px; înălțime linie: 100px; )

pro

• Funcționează în toate browserele.
• Nu taie textul dacă nu se potrivește.

Minusuri

• Funcționează numai cu text (nu funcționează cu elemente de bloc).
• Dacă există mai multe rânduri de text, arată foarte rău.

Această metodă este foarte utilă pentru elementele mici, cum ar fi centrarea textului într-un buton sau câmp de text.

Acum că știți cum să obțineți alinierea verticală la centru, să facem un site web simplu care va sfârși prin a arăta astfel:

Pasul 1

Este întotdeauna bine să începeți cu marcajul semantic. Pagina noastră va fi structurată după cum urmează:

• #floater (pentru a centra conținutul)
• #centrat (element central)
  • #latură
    • #siglă
    • #nav (lista
    • #conţinut
  • #bottom (pentru drepturi de autor și toate astea)

  Să scriem următorul marcaj html:

  O companie centrată O companie

  • Acasă
  • Produse
  • Blog
  • a lua legatura
  • Despre
  Titlul paginii

  Reprogramează holistic externalizarea cu valoare adăugată după colaborarea centrată pe proces și partajarea ideilor. Simplificați din punct de vedere energetic piețele de nișă cu impact prin imperativele activate. Predominați holistic inovația premium după scenarii convingătoare. Recaptiualizați fără probleme standardele înalte în capitalul uman cu produse fabricate de ultimă generație. Distribuiți în mod distinct schemele conforme cu standardele înaintea vortalurilor robuste. Recaptiualizați în mod unic gradul de pregătire pentru web în raport cu informațiile disponibile.

  Titlul 2

  Îmbrățișați eficient pregătirea personalizată pentru web, mai degrabă decât procesele direcționate către client. Creșteți în mod asertiv imperativele multiplatforme față de tehnologiile proactive. Îmbunătățiți în mod convenabil meta-servicii multidisciplinare fără interfețe la nivel de întreprindere. Simplificați convenabil domeniile tematice strategice competitive cu piețe electronice concentrate. Sindicați fosfluorescent comunități de clasă mondială față de piețele cu valoare adăugată. Reinventează în mod corespunzător serviciile holistice înaintea serviciilor electronice robuste.

  Notificarea privind drepturile de autor ajunge aici

  Pasul 2

  Acum vom scrie cel mai simplu CSS pentru a plasa elemente pe pagină. Ar trebui să salvați acest cod într-un fișier style.css. În acest sens este scris linkul în fișierul html.

  Html, corp ( margine: 0; umplutură: 0; înălțime: 100%; ) corp ( fundal: url("page_bg.jpg") 50% 50% no-repeat #FC3; font-family: Georgia, Times, serif; ) #floater ( poziție: relativă; float: stânga; înălțime: 50%; margine-jos: -200px; lățime: 1px; ) #centrat (poziția: relativ; clar: stânga; înălțime: 400px; lățime: 80%; max. -lățime: 800px; lățime minimă: 400px; marjă: 0 automat; fundal: #fff; chenar: 4px solid #666; ) #jos (poziția: absolut; jos: 0; dreapta: 0; ) #nav (poziția: absolut; stânga: 0; sus: 0; jos: 0; dreapta: 70%; umplutură: 20px; marjă: 10px; ) #conținut (poziția: absolut; stânga: 30%; dreapta: 0; sus: 0; jos: 0; overflow: automat; înălțime: 340px; umplutură: 20px; margine: 10px; )

  Înainte de a ne alinia centrul de conținut, trebuie să setăm înălțimea corpului și html la 100%. Deoarece înălțimea este calculată fără umplutură internă și externă (padding și margine), le setăm (padding) la 0, astfel încât să nu existe bare de defilare.

  Marja de jos pentru un element „plutitor” este egală cu minus jumătate din înălțimea conținutului (400px), și anume -200px ;

  Pagina ta ar trebui să arate acum cam așa:

  

  #latime element centrat 80%. Acest lucru face site-ul nostru mai restrâns pe ecranele mici și mai larg pe cele mai mari. majoritatea site-urilor arată indecent pe noile monitoare largi din colțul din stânga sus. Proprietățile min-width și max-width limitează, de asemenea, pagina noastră, astfel încât să nu pară prea lată sau prea îngustă. Internet Explorer nu acceptă aceste proprietăți. Trebuie să-l setați la o lățime fixă.

  Deoarece elementul #centrated are poziție:setul relativ, putem folosi poziționarea absolută a elementelor din el. Apoi setați overflow:auto; pentru elementul #content, astfel încât să apară bare de defilare dacă conținutul nu se potrivește.

  Pasul 3

  Ultimul lucru pe care îl vom face este să adăugăm ceva stil pentru a face pagina să arate puțin mai atractivă. Să începem cu meniul.

  #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; culoare de fundal: #e8e8e8; umplutură: 7px; margine: 0; text-decor: niciunul; culoare: #000; chenar-jos: 1px solid #bbb; text-align: right; ) #nav li a::after ( conținut: """; culoare: #aaa; greutate font: bold; afișare: inline; float: dreapta; margine: 0 2px 0 5px; ) #nav li a:hover, #nav li a:focus ( fundal: # f8f8f8; border-bottom-color: #777; ) #nav li a:hover::after ( marja: 0 0 0 7px; culoare: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )

  Primul lucru pe care l-am făcut pentru a face meniul să arate mai bine a fost să eliminăm marcatorii prin setarea atributului list-style:none și, de asemenea, să setăm umplutura și umplutura, deoarece acestea variază foarte mult în mod implicit în diferite browsere.

  Observați că apoi am specificat că legăturile ar trebui redate ca elemente bloc. Acum, când sunt afișate, acestea sunt întinse pe toată lățimea elementului în care se află.

  Un alt lucru interesant pe care l-am folosit pentru meniu sunt pseudo-clasele:before și:after. Ele vă permit să adăugați ceva înainte și după un element. Aceasta este o modalitate bună de a adăuga pictograme sau simboluri, cum ar fi o săgeată la sfârșitul fiecărui link. Acest truc nu funcționează în Internet Explorer 7 și mai jos.

  

  Pasul 4

  Și nu în ultimul rând, vom adăuga câteva șuruburi designului nostru pentru și mai multă frumusețe.

  #centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 (familie de fonturi: Helvetica, Arial, sans- serif; greutate font: normal; culoare: #666; ) h1 (culoare: #f93; margine de jos: 1px solid #ddd; spațiere între litere: -0,05em; greutate font: bold; margine de sus: 0; padding-top: 0; ) #bottom ( padding: 10px; font-size: 0.7em; culoare: #f03; ) #logo (font-size: 2em; text-align: center; culoare: #999; ) #logo puternic (greutate font: normal; ) #logo span (afișare: bloc; dimensiune font: 4em; înălțime linie: 0,7 em; culoare: #666; ) p, h2, h3 ( înălțime linie: 1,6 em; ) a (culoare: #f03; )

  În aceste stiluri setăm colțuri rotunjite pentru elementul #centrat. În CSS3, acest lucru se va face prin proprietatea border-radius. Acest lucru nu este încă implementat în unele browsere, în afară de utilizarea prefixelor -moz și -webkit pentru Mozilla Firefox și Safari/Webkit.

  

  Compatibilitate

  După cum probabil ați ghicit deja, principala sursă de probleme de compatibilitate este Internet Explorer:

  • Elementul #floater trebuie să aibă un set de lățime
  • IE 6 are umplutură suplimentară în jurul meniurilor

  237152 vizualizări

  O zi bună, abonați și cititori ai acestei publicații. Astăzi vreau să intru în detalii și să vă spun cum să centrați textul în CSS. În unele articole anterioare, am atins indirect acest subiect, așa că aveți câteva cunoștințe în acest domeniu.

  Cu toate acestea, în această publicație vă voi spune despre toate modalitățile diferite de a alinia obiecte și, de asemenea, vă voi explica cum să indentați și să liniați în roșu paragrafele. Deci, să începem să învățăm materialul!

  Html și descendenții săi și se aliniază

  Această metodă nu este aproape niciodată folosită, deoarece a fost înlocuită cu instrumente de foaie de stil în cascadă. Cu toate acestea, să știi că o astfel de etichetă există nu te va răni.

  În ceea ce privește validarea (acest termen este descris în detaliu în articolul „”), specificația html în sine condamnă utilizarea< center>, deoarece pentru valabilitate este necesar să se folosească DOCTYPE tranzitoriu> .

  Acest tip permite trecerea elementelor interzise.

  CENTRU

  Acest conținut va fi centrat.

  Vă rugăm să rețineți că pentru imagine, atributul pe care îl analizăm are semnificații ușor diferite.

  În exemplu, am folosit align=" middle" . Datorită acestui fapt, imaginea a fost aliniată astfel încât propoziția să fie situată clar în mijlocul imaginii.

  Instrumente de centrare în css

  Proprietățile CSS concepute pentru a alinia blocurile, textul și conținutul grafic sunt folosite mult mai des. Acest lucru se datorează în primul rând confortului și flexibilității implementării stilurilor.

  Deci, să începem cu prima proprietate de centrare a textului - text-align.

  Funcționează în același mod ca align in . Dintre cuvintele cheie, puteți selecta unul din lista generală sau puteți moșteni caracteristicile unui strămoș (moștenire).

  Aș dori să remarc că în css3 puteți seta încă 2 parametri: start – în funcție de regulile de scriere a textului (de la dreapta la stânga sau invers) setează alinierea la stânga sau la dreapta (asemănător cu lucrul la stânga sau la dreapta) și sfârșit – opusul începutului (când scrieți text de la stânga la dreapta funcționează ca la dreapta, când este scris de la dreapta la stânga - stânga).

  text-align div ( chenar: 5px dublu roșu; umplutură: 0 22px 0 22px; ) #l ( text-align: right; ) #s ( text-align: final; )

  Propoziție din dreapta

  Propoziție folosind sfârșit

  Îți voi spune despre un mic truc. Când este selectată justificarea, ultima linie poate atârna neatractiv de jos. Pentru a-l poziționa, de exemplu, în centru, puteți folosi proprietatea text-align-last.

  Pentru a alinia vertical conținutul site-ului sau celulele tabelului, utilizați proprietatea vertical-align. Mai jos am descris principalele cuvinte cheie ale elementului.

  Cuvânt cheie	Scop
  de bază	Specifică alinierea la o linie strămoșească, numită linie de bază. Dacă obiectul strămoș nu are o astfel de linie, atunci alinierea are loc de-a lungul marginii inferioare.
  mijloc	Mijlocul obiectului mutant este aliniat la linia de bază, la care se adaugă podeaua înălțimii elementului părinte.
  fund	Partea de jos a conținutului selectat se ajustează la partea de jos a obiectului de sub acesta.
  top	Similar cu partea de jos, dar cu partea de sus a obiectului.
  super	Face superscriptul caracterului.
  sub	Face elementul indice.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

  vertical-align FLORE

  vertical-align div( dimensiunea fontului: 4em; text-align: center; text-decoration: subliniere; ) #A(vertical-align: top;) #B(vertical-align: middle;) #C(vertical-align: middle;) : super;) #D(vertical-align: sub;) FLORE

  Indentări

  Și în sfârșit ajungem la liniuțele de paragraf. Limbajul CSS folosește o proprietate specială numită text-indent .

  Cu ajutorul acestuia puteți face atât o linie roșie, cât și o proeminență (trebuie să specificați o valoare negativă).

  text-indent #a ( text-indent: 53px; ) #b ( text-indent: -43px; ) div ( fundal: #FFDAB9; lățime: 35%; font-size: 29px; margin-left: 30%; umplutură -stânga:50px;)

  Pentru a crea o linie roșie trebuie să cunoașteți doar un parametru.

  Aceasta este proprietatea simplă de indentare a textului.

  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.

  Marja de aliniere orizontală: automată

  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.

  text-align: centru

  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

  poziție și marja negativă stângă

  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:

  Aliniere cu 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

  display: inline-block + text-align: center

  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ă
  • Despre autor
  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; )

  Sunt aliniat vertical

  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%; )

  Astfel, folosind poziţionarea şi marginile negative, puteţi centra un element pe pagină.

  afișare: tabel-celulă

  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 dislpay: table; property. :

  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; )

  Sunt aliniat vertical

  Alinierea dinamică a unui element pe o pagină

  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 elementului alignCenter(elem) ( elem.css(( // se calculează coordonatele din stânga și sus din stânga: ($(window).width() - elem.width()) / 2 + " px", sus: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

  Aplicarea Flexbox

  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: auto 0; doar 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ă.

  Resurse aferente Ajută proiectul

  Când așezați o pagină, este adesea necesar să efectuați alinierea la centru folosind metoda CSS: de exemplu, centrarea blocului principal. Există mai multe opțiuni pentru a rezolva această problemă, fiecare dintre acestea, mai devreme sau mai târziu, trebuie să fie folosită de orice designer de layout.

  Centrare alinierea textului

  Adesea, în scopuri decorative, este necesar să setați textul la aliniere la centru; CSS în acest caz vă permite să reduceți timpul de aspect. Anterior, acest lucru se făcea folosind atribute HTML, dar acum standardul cere ca textul să fie aliniat folosind foi de stil. Spre deosebire de blocuri, pentru care trebuie să modificați marginile, în CSS, centrarea textului se face folosind o singură linie:

  • text-align:center;

  Această proprietate este moștenită și transmisă de la părinte către toți descendenții. Afectează nu numai textul, ci și alte elemente. Pentru a face acest lucru, acestea trebuie să fie inline (de exemplu, span) sau inline-block (orice blocuri care au setată proprietatea display: block). Această ultimă opțiune vă permite, de asemenea, să modificați lățimea și înălțimea elementului și să reglați indentările mai flexibil.

  Adesea, pe pagini, alinierea este atribuită etichetei în sine. Acest lucru invalidează imediat codul, deoarece W3C a depreciat atributul align. Utilizarea acestuia pe o pagină nu este recomandată.

  Alinierea unui bloc la centru

  Dacă trebuie să centrați un div, CSS oferă o modalitate destul de convenabilă: utilizarea marginilor. Indentațiile pot fi setate atât pentru elementele bloc, cât și pentru elementele bloc inline. Valoarea proprietății ar trebui să fie 0 (căptușeală verticală) și automată (căptușeală orizontală automată):

  • margine:0 auto;

  Acum această opțiune este recunoscută ca fiind absolut valabilă. Folosirea padding-ului extern vă permite și să setați imaginea să fie centrată: vă permite să rezolvați multe probleme legate de poziționarea unui element pe pagină.

  

  Aliniați un bloc la stânga sau la dreapta

  Uneori nu este necesară alinierea centrului CSS, dar trebuie să plasați două blocuri unul lângă altul: unul pe marginea stângă, celălalt pe dreapta. În acest scop, există o proprietate float, care poate lua una dintre cele trei valori: stânga, dreapta sau niciunul. Să presupunem că aveți două blocuri care trebuie așezate unul lângă altul. Atunci codul va fi astfel:

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

  Dacă există și un al treilea bloc, care ar trebui să fie situat sub primele două blocuri (de exemplu, un subsol), atunci trebuie să i se atribuie proprietatea clear:

  • .left (float:left;)
  • .right(float:right)
  • subsol (clear:both)

  Cert este că blocurile cu clasele stânga și dreapta cad din fluxul general, adică toate celelalte elemente ignoră însăși existența elementelor aliniate. Proprietatea clear:both permite subsolului sau oricărui alt bloc să vadă elementele care au căzut din flux și interzice plutirea atât în ​​stânga, cât și în dreapta. Prin urmare, în exemplul nostru, subsolul se va deplasa în jos.

  Aliniere verticală

  Există momente în care nu este suficient să setați alinierea la centru folosind metode CSS; de asemenea, trebuie să schimbați poziția verticală a blocului copil. Orice element în linie sau în bloc poate fi imbricat la marginea de sus sau de jos, în mijlocul unui element părinte sau în orice locație. Cel mai adesea, blocul trebuie aliniat la centru; pentru aceasta, se folosește atributul vertical-align. Să presupunem că există două blocuri, unul imbricat în celălalt. În acest caz, blocul interior este un element inline-block (afișare: inline-block). Trebuie să aliniați blocul copil pe verticală:

  • aliniere de sus - .child(vertical-align:top);
  • aliniere la centru - .child(vertical-align:middle);
  • aliniere de jos - .child(vertical-align:bottom);

  Nici alinierea textului, nici alinierea verticală nu afectează elementele blocului.

  

  Posibile probleme cu blocurile aliniate

  Uneori, centrarea unui div folosind CSS poate cauza mici probleme. De exemplu, când folosiți float: să presupunem că există trei blocuri: .first, .second și .third. Al doilea și al treilea bloc se află în primul. Elementul cu clasa secundă este aliniat la stânga, iar ultimul bloc este aliniat la dreapta. După stabilizare, ambele au căzut din flux. Dacă elementul părinte nu are un set de înălțime (de exemplu, 30em), atunci nu se va mai întinde la înălțimea blocurilor sale copil. Pentru a evita această eroare, utilizați un „spacer” - un bloc special care vede .second și .third. Cod CSS:

  • .second(float:left)
  • .a treia (float:right)
  • .clearfix(înălțime: 0; clar: ambele;)

  Deseori se folosește pseudo-clasa:after, care vă permite, de asemenea, să readuceți blocurile la locul lor prin crearea unui pseudo-spacer (în exemplu, un div cu clasa container se află în interior.first și conține.stânga și.dreapta) :

  • .left(float:left)
  • .right(float:right)
  • .container:după(conținut:""; afișare:tabel; clear:both;)

  Opțiunile de mai sus sunt cele mai comune, deși există mai multe variante. Puteți găsi întotdeauna cel mai simplu și mai convenabil mod de a crea un pseudo-distanțier prin experimentare.

  O altă problemă pe care o întâmpină adesea designerii de layout este alinierea elementelor în bloc. Un spațiu este adăugat automat după fiecare dintre ele. Proprietatea marjei, care este setată la o liniuță negativă, ajută la rezolvarea acestui lucru. Există și alte metode care sunt folosite mult mai rar: de exemplu, zeroing.În acest caz, font-size: 0 este scris în proprietățile elementului părinte. Dacă există text în interiorul blocurilor, atunci dimensiunea necesară a fontului este deja returnată în proprietățile elementelor de bloc inline. De exemplu, font-size:1em. Această metodă nu este întotdeauna convenabilă, așa că opțiunea cu indentări externe este mult mai des folosită.

  

  Alinierea blocurilor vă permite să creați pagini frumoase și funcționale: aceasta include aspectul aspectului general, aranjarea produselor în magazinele online și fotografii de pe un site web de cărți de vizită.