Dezvoltare web cu CSS. Blocați în centrul blocului: cât de repede puteți rezolva problema?

CSS este limba căsuțelor de stil cascadă. Tehnologia veche, care a apărut la începutul WEB-ului, se dezvoltă activ astăzi și ne permite să rezolvăm multe sarcini pentru care utilizarea jаvascript a fost solicitată mai devreme, prin mijloace native.

Dar, în anumite momente, simțim încă slăbiciunea CSS. Blocați în centrul blocului - o astfel de sarcină trivială rămâne în continuare o problemă reală pentru oricine care învață doar elementele de bază ale dezvoltării web. Odată cu apariția Flexbox și Grid Layout, această sarcină a devenit mult mai ușoară, dar acestea nu sunt acceptate de toate browserele, iar IE 9 va trebui să caute alte soluții. Deci, haideți să ne uităm la modalitățile de bază de aliniere a blocurilor în CSS.

Alinierea orizontală sau Cum să plasați blocul CSS în centru

Cea mai ușoară cale de a centra centrala pe orizontală, există imediat câteva soluții simple și elegante. Prima modalitate este de a folosi proprietatea marjei, care este responsabilă pentru indentarea exterioară și permite alinierea blocului în centru. CSS o face foarte elegantă. Este important să nu fi confundat cu proprietățile de umplutură care umplutură de la fiecare parte a unității poate fi setat, „împins“ de conținutul de frontieră și crearea unui spațiu între ele.

Cea de-a doua modalitate este de a utiliza proprietatea text-align: center dacă blocul este specificat ca un comportament de linie sau bloc-linie (afișaj: inline sau display: inline-block).

Plăcuță automată spre dreapta și stânga prin margine: 0 automat

Proprietatea de marjă permite plasarea eficientă a unui bloc în centrul blocului părinte în CSS, adică este potrivit pentru cazurile în care fiecărui element îi este dată proprietatea de afișare: bloc. Este suficient doar să specificați marja: 0 parametrul auto în fișierul CSS sau să folosiți atributul de stil în codul HTML. Decriptați conținutul acestui parametru:

• 0 - înseamnă că nu sunt niște indentări exterioare în partea superioară și inferioară a elementului;
• Auto spune browser-ului dvs. să calculeze linii separate și în stânga, definind spațiu liber pe laturi și distribuindu-l în mod egal pe fiecare parte a blocului.

Dacă totul se face corect, la setarea marginii: 0 proprietatea auto în CSS, blocul din centrul blocului va apărea automat. Puteți pune o întrebare rezonabilă: "De ce nu pot seta marja: automat auto, alinierea blocului, de asemenea, pe verticală?" Din nefericire, această opțiune nu funcționează din cauza unei astfel de trăsături a modelului de bloc, cum ar fi prăbușirea verticală a indenturilor exterioare.

Ce ar trebui să fac dacă blocul are un comportament șir?

Așa cum am spus mai sus, una din trăsăturile cheie ale CSS este că orice bloc poate fi dat unul din mai multe comportamente. Deasupra am considerat cazul când un element este un bloc nu numai în aspect, ci și în poziția "în flux", relația cu alte elemente de pe pagină.

Acum vom lua în considerare cazul în care obiectului i se dă o linie (display: inline) sau comportamentul bloc-linie (afișare: inline-block). Și în primul și al doilea caz, el va percepe proprietățile care guvernează comportamentul textului pe pagină. Și alinierea blocului în centru în CSS, parametrul text-align: center, care permite rezolvarea problemei fără complicații, ne va ajuta. Pur și simplu îi atribuim unității părinte, iar elementul nostru devine automat exact în mijlocul planului orizontal. Acesta va fi afectat de alte proprietăți similare, de exemplu, vertical-align: middle, conceput pentru a centra textul vertical.

CSS elegant: utilizați proprietatea de poziționare: absolută

În CSS, alinierea blocului în centru este posibilă și cu poziționarea absolută. Pentru elementele de aliniere modul cel mai frecvent utilizate de poziție non-standard proprietăți: relativă, permițând să se deplaseze în orice direcție păstrând în același timp spațiul paginii original și prin poziția: absolută, complet „scăpa“ elementul de fluxul și ideal pentru a fi poziționat în unitatea CSS în centrul blocului în plan vertical.

Să presupunem că obiectul nostru are o înălțime de 100px și o lățime de 200px, un dreptunghi standard. Pentru a-l alinia la centru, l-am cere să se retragă de pe stânga și a 50% (stânga: 50%, iar în partea de sus: 50%), iar după - externalitățile marjele negative cu aceste părți la jumătate din lățimea și înălțimea blocului (margin-left: -100px și sus: -50px). Să explicăm acest aspect mai detaliat.

Proprietățile din stânga și din dreapta cu o valoare de 50% "ia" elementul din colțul din stânga sus și îl poziționează în blocul CSS din centrul blocului părinte. Dar asta nu e tot. În momentul în CSS, alinierea blocului din centru nu poate fi încă numită precisă, deoarece în centru este localizat numai colțul superior al elementului. Pentru a obține cele mai bune rezultate, avem nevoie pentru a muta elementul înapoi la jumătate din lățimea și înălțimea acesteia, folosind adânciturile corespunzătoare verticale sau a proprietății mai complexe transforma: traduce (-50%, -50%), îndeplinind aceeași funcție. Acum, unitatea este situată în mod ideal. În concluzie, observăm că puteți rezolva problema cu ajutorul tehnologiei Flexbox, dar este destinată utilizatorilor avansați și nu funcționează în toate browserele.