Șapte metode de aliniere folosind css
Elemente Centrarea orizontal pe pagină, se pare, este cea mai ușoară, în timp ce efectua alinierea verticală mai dificilă, iar cel mai dificil - combinarea acestor două probleme. Cu un design adaptiv, rareori știm înălțimea exactă sau lățimea elementelor, eliminând numeroasele posibilități. Așa cum am calculat, rămâne cel puțin șase metode de centrare în CSS. Voi începe cu cel mai simplu și cel mai bine sprijinite și pentru a trece pe la cele mai complexe, care lucrează la o singură sursă principală:
HTML5 și CSS3 practica de la zero la rezultatul!
Imaginile de pantofi vor varia, dar va rămâne întotdeauna în dimensiunea originală 500px × 500px. HSL model de culoare ( «Nuanță-Saturație-Luminozitate“ aplicat fundaluri pentru a menține tema de culoare stabilă.
centrarea orizontală folosind text-aliniere
Uneori, cea mai bună soluție este evident:
Nu se aliniază imaginea pe verticală: pentru ao realiza, va trebui să adăugați padding la un div sau o marjă-top și margin-bottom la conținutul său, lăsând posibilitatea de a obține înălțimea containerului din propriul conținut.
Centrarea Utilizarea margin: auto
Și din nou, în principal pentru alinierea pe orizontală, și cu aceleași restricții ca metoda de mai sus, cu un text-aliniere:
Acordați atenție la ecran: bloc, în acest caz, este necesar să se asigure că imaginea a margin: 0 auto.
Centrarea de masă celulară
Aplicare afișare: tabel cu celule, mai degrabă decât un aspect de masă reală; Acesta permite atât centrarea pe orizontală și pe verticală. De obicei necesită adăugarea și manipularea elementului al doilea, exterior, care poate fi orice - de la div la corp.
Observați că lățimea: 100% este necesară pentru a preveni coagularea div, iar recipientul exterior pentru alinierea verticală a conținutului va necesita o anumită înălțime. Încercarea de a alinia corpul elementului vertical, în plus, este vorba de o tehnică standard - instalare si inaltimea corpului html. Acesta funcționează în toate browserele, inclusiv IE8 +.
centrare absolută
Tehnica a introdus recent Steven Shaw (Stephen Shaw) este bine susținută de browsere. Singurul dezavantaj al este că înălțimea ar trebui să fie declarată într-o formă la partea exterioară a containerului:
Centrarea folosind traduce
Noua tehnica Koyera Chris (Chris Coiyer), folosind conversie CSS. De asemenea, sprijină centrarea pe orizontală și verticală:
HTML5 și CSS3 practica de la zero la rezultatul!
Ea are mai multe dezavantaje:
modificări de cod CSS pentru a lucra în toate browserele necesită prefixele versiune furnizor
Nu funcționează în versiunile mai vechi ale IE (versiunea 8 și de mai sus)
Recipientul exterior va trebui să stabilească înălțimea (sau să-l orice alt mod), din cauza conținutului său este pozitionat absolut, el nu va primi nici o înălțime.
În cazul în care conținutul este un text, metodele actuale de aspect browser-ul poate face textul tradus neclare.
Centrarea folosind flexbox
Poate că cea mai simplă soluție ar fi centrată după dispariția proprietăților și a opțiunilor versiunea furnizor prefix.
În multe feluri, cea mai simplă soluție, dar o mulțime de sintaxă vechi pent și lipsa de sprijin pentru versiunile mai vechi ale IE (deși display: treci pentru masa de celule alternativă acceptabilă). CSS complet:
Acum, caietul de sarcini este deja de peste, și a stabilit un sprijin browser-ul, și voi dezvălui proprietatea flexbox și utilizarea sa într-un articol viitor.
Centering folosind calc
Mai versatil decât flexbox, în anumite condiții:
Este foarte simplu, Calc vă oferă posibilitatea de a face calcule bazate pe aspectul paginii curente. În calculul de mai sus simplu de 50% - un element cu conținut mediu, dar cererea sa de a stabili în mod individual colțul din stânga sus al imaginii în div centru. Trebuie să aducem această poziție înapoi la jumătate din lățimea și jumătate din înălțimea imaginii. Pentru a pune în întregime:
Veți găsi că, în browserele actuale, această tehnică pare să funcționeze cel mai bine pe conținutul dimensiunilor fixe cunoscute:
Și din nou, voi discuta într-un viitor articol calc. Această tehnică este aproape aceleași dezavantaje potențiale pe care flexbox: în timp ce are un suport bun în Firefox, de la versiunea 4, în versiunile anterioare ale browser-ului este nevoie de prefixele versiunea furnizor și absolut nici un sprijin în IE 8. Imagine Codul complet va fi :
Deși există caracteristici, cum ar fi utilizarea de aliniere pseudo verticală, înțelegerea acestor șase tehnici de a crea orice sortiment solid dezvoltator web, vă puteți baza pe când elementele de centrare.
Revizie: Echipa webformyself.
HTML5 și CSS3 practica de la zero la rezultatul!
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram
