Share
Chris Coyier a publicat recent un arbore de decizii pe site-ul său, CSS Tricks, pentru a demonstra o multitudine de modalități de a centraliza lucrurile pe orizontală sau pe verticală folosind CSS. Ca soluții independente, toate au avertismente, dar combinate ele sunt un instrument de centrare de neoprit care funcționează în browser-ul încrucișat în IE8 și în mod consecvent.
Acesta este modul în care faceți acest lucru.
Notă: pentru a acoperi toate bazele pe care le-am furnizat explicația în format video și scris.
Descărcați video sau abonați-vă la Tuts + Web Design pe Youtube
Dacă faceți un site web receptiv, probabil că vă veți dimensiona elementele cu procente, așa că să facem un arbitrar .recipient element:
...
.container lățime: 70%; înălțime: 70%; margine: 40 pixeli auto; fundal: roșu;
Pentru a vă asigura că elementul nostru care se află în contact se întinde în mod adecvat, hai să ne fixăm html, corp lățime: 100%; înălțime: 100%; .
Acum, înăuntru .recipient, vom obține centrarea verticală cu modelul de masă obișnuit. Acest lucru ia elemente normale la nivel de bloc și le face să se comporte ca niște celule de masă, oferindu-ne o centrare verticală:
...
.exterior afișaj: tabel; lățime: 100%; înălțime: 100%; .inner display: table-cell; vertical-aliniere: mijloc; text-align: centru;
În final, vom adăuga un element centralizat orizontal:
...
.centrate poziție: relativă; afișare: inline-block; lățime: 50%; padding: 1em; fundal: portocaliu; culoare albă;
În interiorul acestui lucru, puteți plasa orice doriți din inimă, inclusiv blocuri dinamice de înălțime dinamică sau elemente absolut poziționate.
Demonstrați pe GitHub
Pentru a schimba centrarea orizontală a elementului, trebuie doar să modificați .interior„s aliniere text proprietate. Pentru a schimba centrarea verticală, modificați-o .interior„s vertical-align proprietate.
Acest exemplu poate părea o mulțime de marcare, dar piesele de lucru sunt doar trei divs: .exterior, .interior, și.centrat. Și stilul pentru acestea este consecvent, astfel încât să puteți folosi acest lucru în CSS boilerplate dvs. de proiecte și nu vă faceți griji din nou.
Este un element mai mare decât cele mai multe tehnici de centrare și complet antiglonț. Speranța mea este că acest lucru devine abordarea standard și putem în cele din urmă să nu mai ne îngrijorăm de centralizarea în CSS.
Accentsconagua