Ar trebui să fie ușor de găsit pentru vizitator informatie necesara Pe pagina. Pentru aceasta sunt folosite diverse etichete HTML, precum și pentru exprimarea unor expresii. Acest articol va discuta nuanțele lucrului cu tabele, în special alinierea acestora.
Subtilități de bazăÎn primul rând, trebuie menționat că această formă grafică de prezentare a datelor vă permite să structurați informațiile, ceea ce facilitează foarte mult asimilarea acesteia. Aproape orice conținut poate fi în interiorul celulelor tabelului: de la text la video. Este important să luați în considerare nu numai dimensiunea, ci și locația acestuia.
Cum să centrați masa în sineCel mai adesea, trebuie să aranjați tabelul în centrul paginii, deși inițial este apăsat în partea stângă a paginii. Pentru a-l alinia la centru, trebuie să setați proprietatea marjei la automat.
Acest lucru face ca indentarea tabelului să fie calculată automat. După aceasta, tabelul va fi în centrul paginii.
Alinierea la centru în celuleLa fel de des, trebuie să aliniați datele la centrul celulei. Există trei moduri de a face acest lucru: orizontal, vertical și absolut. Din numele lor se vede clar de-a lungul cărei axe va avea loc centrarea. În orice caz, eticheta este folosită
| Text centrat în celulă |
Dacă doriți să faceți acest standard de formatare pentru întregul site sau pagină (pentru a nu rescrie fiecare tabel), atunci ar trebui să utilizați stiluri CSS. Pentru a face acest lucru, adăugați următorul cod în interiorul etichetei:
tabel ( aliniere: centru; // Pentru a alinia conținutul tabelului centrat pe orizontală vertical-align: mijloc; // Pentru a alinia conținutul tabelului centrat vertical)
Folosind această metodă, puteți seta, de asemenea, alinierea pentru o anumită celulă, o coloană, un rând sau întregul tabel în ansamblu. După cum puteți vedea, oricare dintre metode este foarte simplă.
În CSS, unele lucruri aparent simple nu sunt atât de ușor de făcut. Unul dintre aceste lucruri este alinierea, adică. când un element trebuie poziționat într-un anumit mod față de altul.
Acest articol prezintă câteva soluții gata făcute care vor ajuta la simplificarea activității de centrare a elementelor pe orizontală și/sau verticală.
Notă: Sub fiecare soluție este o listă de browsere care indică versiunile în care funcționează codul CSS specificat.
CSS - Center Align Block1. Alinierea unui bloc la centrul altuia. În acest caz, primul și al doilea bloc au dimensiuni dinamice.
... ...
Părinte ( poziție: relativ; ) .copil ( poziție: absolut; stânga: 50%; sus: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50% , -50%); -ms-transform: traducere(-50%, -50%); -o-transform: traducere (-50%, -50%); transformare: traducere (-50%, -50%) ;)
- Chrome 4.0+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 10.5+
- Safari 3.1+
2. Alinierea unui bloc la centrul altuia. În acest caz, al doilea bloc are dimensiuni fixe.
Părinte (poziție: relativă; ) .copil (poziția: absolut; stânga: 50%; sus: 50%; /* lățime și înălțime a 2 blocuri */ lățime: 500px; înălțime: 250px; /* Valorile sunt determinate în funcție de pe dimensiunea sa */ /* margin-left = - lățime / 2 */ margin-left: -250px; /* margin-top = - înălțime / 2 */ margin-top: -125px; )
Browsere care acceptă această soluție:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
3. Alinierea unui bloc la centrul altuia. În acest caz, al doilea bloc are dimensiuni specificate în procente.
Părinte ( poziție: relativ; ) .copil (poziția: absolut; /* lățime și înălțime a 2 blocuri în % */ înălțime: 50%; lățime: 50%; /* Valorile se determină în funcție de mărimea acestuia în % * / stânga: 25%; /* (100% - lățime) / 2 */ sus: 25%; /* (100% - înălțime) / 2 */ )
Browsere care acceptă această soluție:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
1. Aliniați unul element bloc(afișare: bloc) față de celălalt (în care se află) orizontal:
... ...
Blocare ( margine-stânga: automat; margine-dreapta: automat; )
Browsere care acceptă această soluție:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 6.0+
- Opera 3.5+
- Safari 1.0+
2. Alinierea orizontală a unui element de linie (display: inline) sau line-block (display: inline-block):
... ...
Părinte ( text-align: center; ) .child (afișare: inline-block; )
Browsere care acceptă această soluție:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
1. Centrați un element (display: inline, display: inline-block) față de celălalt (în care se află) în centru. Blocul părinte din acest exemplu are o înălțime fixă, care este setată folosind proprietatea CSS line-height.
... ...
Părinte ( line-height: 500px; ) .child (afișare: inline-block; vertical-align: middle; )
Browsere care acceptă această soluție:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Centrarea unui bloc față de altul pe verticală prin reprezentarea părintelui ca tabel, iar copilul ca o celulă a acestui tabel.
Părinte ( display: table; ) .child ( display: table-cell; vertical-align: middle; )
Browsere care acceptă această soluție:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
Dacă cunoașteți alte trucuri interesante sau soluții utile de aliniere gata făcute, atunci împărtășiți-le în comentarii.
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, există o proprietate specială de aliniere verticală cu mai multe valori în CSS pentru alinierea verticală. 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,
- inaltimea 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; culoare de fundal: #ffc; ) . interior ( afișare: bloc inline; lățime: 100 px; înălțime: 100 px; culoare de fundal : #fcc; )
După aplicarea stilurilor, vom vedea că blocul interior este aliniat orizontal, dar nu vertical:
http://jsfiddle.net/c1bgfffq/
De ce s-a întâmplat? 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.
Alinierea folosind un tabel Prima soluție care îmi vine în minte este înlocuirea blocului exterior cu un tabel dintr-o celulă. În acest caz, alinierea va fi aplicată conținutului celulei, adică blocului interior.
http://jsfiddle.net/c1bgfffq/1/
Minus evident această decizie– 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.
Alinierea cu înălțimea liniei Dacă știți că blocul interior nu trebuie să ocupe mai mult de un rând de text, atunci puteți utiliza proprietatea înălțime linie și o puteți seta egală cu înălțimea blocului exterior. Deoarece conținutul blocului interior nu trebuie să se încadreze la a doua linie, se recomandă să adăugați și spațiul alb: nowrap și overflow: reguli ascunse.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 folosită și 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șajul: inline-block și vertical-align: middle rules.
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/
Minus aceasta metoda este că trebuie cunoscută înălțimea blocului exterior.
Alinierea prin „întindere” Această metodă poate fi utilizată atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea blocului interior.Pentru a face acest lucru aveți nevoie de:
http://jsfiddle.net/c1bgfffq/4/
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.
Alinierea folosind margine-top negativ Această metodă a devenit cunoscută pe scară largă și este folosită foarte des. Ca și precedentul, se folosește atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea celui interior.Trebuie să setați blocul extern la poziționare relativă, iar blocul intern la poziționare absolută. 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 cu jumătate de î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.
Alinierea folosind transform Această metodă este similară cu cea anterioară, dar poate fi folosită atunci când înălțimea blocului interior este necunoscută. În acest caz, în loc să setați o umplutură negativă de pixeli, puteți utiliza proprietatea de transformare și puteți muta blocul interior în sus folosind funcția translateY și o valoare de -50% .Exterior ( poziție: relativ; ) .intern ( poziție: absolut; sus: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
De ce a fost imposibil să setați valoarea 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ă.
Alinierea cu Flexbox Cel mai modern mod de aliniere verticală este utilizarea Flexible Box Layout (cunoscută în mod popular ca Flexbox). Acest modul vă permite să controlați în mod flexibil poziționarea elementelor pe pagină, aranjandu-le aproape oriunde. Alinierea la centru pentru Flexbox este o sarcină foarte simplă.Blocul exterior trebuie setat să afișeze: flex și blocul interior la margine: auto . Și e 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.
Ce metodă ar trebui să aleg? Trebuie să începeți de la declarația problemei:- Pentru a alinia textul pe verticală, 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 mai mult cazuri complexe Când înălțimea blocului este necunoscută, trebuie să utilizați un pseudo element sau proprietatea de transformare.
- 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.
Etichete: Adăugați etichete
18.02.15 21.4KDacă tăiați orice site creat pe bazat pe html, atunci o anumită structură strat cu strat va apărea în fața ta. Mai mult, cu ale lui aspect va fi asemănător cu un tort stratificat. Dacă așa crezi, atunci cel mai probabil nu ai mâncat de mult. Așa că mai întâi potoliți-vă foamea, apoi vă vom spune cum să centrați un strat div pe site-ul dvs.:
Avantajele aspectului folosind o etichetăExistă două tipuri principale de structură a site-ului web:
- Tabular;
- Bloc.
Aspectul tabelar era dominant chiar și în zorii Internetului. Avantajele sale includ precizia poziționării specificate. Dar, cu toate acestea, are deficiențe evidente. Principalele sunt volumul de cod și viteza mica descărcări.
Când utilizați aspectul tabelului, pagina web nu va fi afișată până când sarcina completa. În timp ce utilizați blocuri div, elementele sunt afișate imediat.
Cu exceptia de mare viteză bloc de încărcare construcția site-ului vă permite să reduceți volumul de mai multe ori cod html. Inclusiv prin utilizarea claselor CSS.
Cu toate acestea, aspectul tabelar ar trebui utilizat pentru a structura afișarea datelor pe pagină. Un exemplu clasic de utilizare a acestuia este afișarea tabelelor.
Construcția blocurilor bazată pe etichete este numită și strat cu strat, iar blocurile în sine sunt numite straturi. Acest lucru se datorează faptului că, atunci când sunt utilizate anumite valori de proprietate, acestea pot fi stivuite una peste alta, similar straturilor din Photoshop.
Ajutoare pentru poziționareÎn aspectul bloc, este mai bine să poziționați straturile folosind foi de stil în cascadă. Principala proprietate CSS responsabilă pentru aspect este float.
Sintaxa proprietății:
float: stânga | dreapta | niciunul | moşteni
Unde:
- stânga – aliniați elementul la marginea din stânga a ecranului. Curgerea în jurul elementelor rămase are loc în dreapta;
- dreapta – aliniere la dreapta, curgere în jurul altor elemente – la stânga;
- nici unul – împachetarea nu este permisă;
- inherit – moștenește valoarea elementului părinte.
Să ne uităm la un exemplu ușor de poziționare a div-urilor folosind această proprietate:
#stânga ( lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,51,102); ) #right ( lățime: 200px; înălțime: 100px; float: dreapta; fundal: rgb(0,255,153); ) Bloc din stânga Blocul din dreapta
Acum vom încerca să folosim aceeași proprietate pentru a poziționa al treilea div în centrul paginii. Dar, din păcate, float nu are o valoare centrală. Și când dați unui bloc nou o valoare de aliniere la dreapta sau la stânga, acesta este deplasat în direcția specificată. Prin urmare, tot ce rămâne este să setați float: lăsat la toate cele trei blocuri:
Dar asta nu este cea mai bună opțiune. Când fereastra este redusă în dimensiune, toate straturile sunt aliniate pe un rând vertical, iar când dimensiunea este mărită, se lipesc de marginea stângă a ferestrei. Deci avem nevoie de o modalitate mai bună de a centra div-ul. Straturi de centrare
În exemplul următor, vom folosi un strat de container în care vom plasa elementele rămase. Acest lucru rezolvă problema blocurilor care se mișcă unul față de celălalt atunci când dimensiunea ferestrei este modificată. Centrarea containerului în mijloc se face prin setarea proprietăților marginii la zero pentru marginile de la marginea superioară și automat pe părțile laterale (marja: 0 auto):
#container ( lățime: 600px; marjă: 0 automat; ) #stânga ( lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,51,102); ) #dreapta ( lățime: 200px; înălțime: 100px; float : stânga; fundal: rgb(0,255,153); ) #center ( lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,0,0); ) Bloc din stânga Bloc central Bloc din dreapta
Același exemplu arată cum puteți centra un div pe orizontală. Și dacă editați ușor codul de mai sus, puteți obține alinierea verticală a blocurilor. Pentru a face acest lucru, trebuie doar să modificați lungimea stratului de container (reduceți-l). Adică, după editarea clasei sale css ar trebui să arate astfel:
După schimbare, toate blocurile se vor alinia strict într-un rând la mijloc. Și poziția lor nu se va schimba indiferent de dimensiunea ferestrei browserului. Iată cum arată centrarea verticală a unui div:
În exemplul următor, am folosit o serie de proprietăți CSS noi pentru a centra straturile în interiorul unui container:
#container ( lățime: 450 px; înălțime: 150 px; margine: 0 automat; culoarea fundalului: #66CCFF; ) # stânga ( lățime: 100 px; înălțime: 100 px; fundal: rgb(255,51,102); afișaj: bloc inline; vertical-align: middle; margin-left: 35px; ) #right ( lățime: 100px; înălțime: 100px; fundal: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; ) #center ( lățime: 100px; înălțime: 100px; fundal: rgb(255,0,0); afișare: bloc inline; aliniere verticală: mijloc; margine-stânga: 35px; )
Scurtă descriere a proprietăților css și a valorilor lor pe care le-am folosit în acest exemplu pentru a centra un div în interiorul unui div:
- display: inline-block – aliniază un element bloc într-o linie și asigură că se înfășoară în jurul altui element;
- vertical-align: middle – aliniază elementul la mijloc în raport cu părintele;
- margin-left – setează marginea din stânga.
Oricât de ciudat ar suna, acest lucru este posibil. Uneori, un bloc div ca link poate fi necesar atunci când amenajați diferite tipuri de meniuri. Să ne uităm la un exemplu practic de implementare a unui strat de legătură:
#layer1( lățime: 500px; înălțime: 100px; fundal: rgb(51.255.204); border:groove; ) a ( afișare: bloc; text-align: center; înălțime: 100%; culoare: rgb(255,0,51) ;) Link către site-ul nostru
În acest exemplu, folosind linia de afișare: bloc, setăm legătura la valoarea unui element bloc. Și pentru ca întreaga înălțime a blocului div să devină o legătură, setați înălțimea: 100%. Ascunderea și afișarea elementelor de bloc
Elementele bloc oferă mai multe oportunități de extindere a funcționalității interfeței decât aspectul tabelar învechit. Se întâmplă adesea ca designul site-ului web să fie unic și ușor de recunoscut. Dar pentru o astfel de exclusivitate trebuie să plătești din lipsă de spațiu liber.
Mai ales se referă pagina principala, costul de publicitate pe care este cel mai mare. Prin urmare, se pune problema unde să „împinge” pe altul banner publicitar. Și aici nu poți scăpa cu alinierea div-ului la centrul paginii!
O soluție mai rațională este să ascundă un bloc. Iată un exemplu simplu de astfel de implementare:
#layer1( display:block; lățime: 500px; înălțime: 100px; fundal: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="bloc"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1; )
Acesta este butonul magic. Făcând clic pe acesta, se va ascunde sau se va afișa blocul de ascundere.
Foarte des în aspect este necesară centrarea unui element orizontal și/sau vertical. Prin urmare, am decis să fac un articol cu căi diferite centrarea 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: centruAceastă 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: centerMetoda 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; )
Linie de aliniere verticală-înălțimePentru 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 susUn 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 căutat modalități de a alinia elemente pe o pagină când Ajutor 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 FlexboxNoile 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 pe orizontală și pe verticală în același timp - acum marginea funcționează nu numai pentru aliniere orizontala, dar și pentru verticală. Și fără o lățime/înălțime cunoscută.
Resurse aferente Ajută proiectul
